HTML5オーディオプレイリスト - 最初のオーディオファイルが終了した後に2番目のオーディオファイルを再生する方法は？

Question

別のオーディオが完成した後、html5でいくつかのオーディオを再生するにはどうすればいいですか？

私はjquery delay()機能で試してみましたが、動作しません。タイマー付きhtml5オーディオでpause()を使用することは可能ですか？たとえば、pause('500',function(){});？

Answer 1

ここJSLinted、控えめなJavascriptの例はがendedmediaeventを処理し、使用する方法を示すのです。特定の状況では、endedイベントハンドラの2番目のオーディオファイルの再生をトリガーします。

以下のコードまたはrun the test fiddleを使用することができます。

再生を開始するには、プレイリストの項目をクリックします。 1つのオーディオが終了すると、次のオーディオが開始されます。

マークアップ：（<li>要素間の空白の意図的な回避の点に注意してください - これはnextSiblingでDOMをトラバース簡単にすることである。）

<audio id="player"></audio> 

<ul id="playlist"><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%201%20by%20Lionel%20Allorge.ogg">Space 1</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%202%20by%20Lionel%20Allorge.ogg">Space 2</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%203%20by%20Lionel%20Allorge.ogg">Space Lab</li></ul> 

<button id="stop">Stop</button> 

スクリプト：

// globals 
var _player = document.getElementById("player"), 
    _playlist = document.getElementById("playlist"), 
    _stop = document.getElementById("stop"); 

// functions 
function playlistItemClick(clickedElement) { 
    var selected = _playlist.querySelector(".selected"); 
    if (selected) { 
     selected.classList.remove("selected"); 
    } 
    clickedElement.classList.add("selected"); 

    _player.src = clickedElement.getAttribute("data-ogg"); 
    _player.play(); 
} 

function playNext() { 
    var selected = _playlist.querySelector("li.selected"); 
    if (selected && selected.nextSibling) { 
     playlistItemClick(selected.nextSibling); 
    } 
} 

// event listeners 
_stop.addEventListener("click", function() { 
    _player.pause(); 
}); 
_player.addEventListener("ended", playNext); 
_playlist.addEventListener("click", function (e) { 
    if (e.target && e.target.nodeName === "LI") { 
     playlistItemClick(e.target); 
    } 
});​ 


​ 

Answer 2

私はこの答えはあなたを助けると思う

...

html5 audio player - jquery toggle click play/pause?

ので、代わりにあなたが絶えずチェックする今までにあなたがして、より快適に感じるのsetTimeout、またはのsetIntervalを使用する必要がありますクリックしてください.paused==false動画の長さを確認して終了したかどうかを確認し、最大長（=ファイルの最後）と比較することができます。

Answer 3

これはあなたのオーディオタグである場合：

<audio id="player" src="someAudio.mp3"/> 

次に、イベントリスナーt o "終了"イベントの場合は、ソースを変更して次のサウンドを再生することができます。

var audio = document.getElementById("player"); 
audio.addEventListener("ended", function() { 
    audio.src = "nextAudio.mp3"; 
    audio.play(); 
}); 

Answer 4

クロムを使用している場合は、現在、オーディオタグの再生を許可していないバグがあることに注意してください。この問題を回避するには、srcをリセットするか、またはプログラムで新しいAudioオブジェクトを作成するだけです。