web-dev-qa-db-ja.com

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

別のオーディオが終了した後、html5でオーディオを再生するにはどうすればよいですか？

Jquery delay() functionを試しましたが、まったく機能しません。代わりに、タイマー付きのhtml5オーディオでpause()を使用できますか？たとえば、pause('500',function(){});？

javascriptjqueryhtmlaudiohtml5-audio
13
Khairu Aqsara

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

以下のコードを使用するか、 テストフィドルを実行 を使用できます。

プレイリスト内のアイテムをクリックして、再生を開始します。 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);
    }
});​


​
14
Lloyd

これがオーディオタグの場合：

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

次に、「終了」イベントのイベントリスナーを追加すると、ソースを変更して次のサウンドを再生できるようになります。

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

私はこの答えがあなたを助けると思います...

html5オーディオプレーヤー-jqueryトグルクリック再生/一時停止？

したがって、クリックする代わりに、setTimeoutまたはsetIntervalを使用する必要があります。どちらでも、.paused==falseを常にチェックする方が快適です。ビデオの長さをチェックして比較することで、終了したかどうかをチェックできる可能性があります。最大長で、==ファイルの終わりです。

0
Val