HTML5 аудио плейлист - как воспроизвести второй аудиофайл после окончания первого?

Question

Как мы могли бы заставить некоторые аудио в html5 воспроизводиться после того, как другой закончится?

Я пробовал использовать функцию jquery delay(), но она вообще не работает, возможно ли использовать pause() в html5 audio вместо таймера? Например, pause('500',function(){});?

Answer 1

Вот JSLinted, ненавязчивый Javascript пример , демонстрирующий, как обрабатывать и использовать ended mediaevent . В вашей конкретной ситуации вы можете запустить воспроизведение второго аудиофайла в обработчике событий ended.

Вы можете использовать приведенный ниже код или запустить тестовую скрипку .

Щелкните элемент в списке воспроизведения, чтобы начать воспроизведение. После того, как закончится один звук, начнется следующий.

разметка: (обратите внимание на намеренное устранение пробелов между <li> элементами - это упрощает обход DOM с помощью nextSibling.)

<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

Если это ваш аудио-тег:

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

, то добавление в него прослушивателя событий для «завершенного» события позволит изменить источник и воспроизвести следующий звук.1005 *

Answer 3

Думаю, этот ответ поможет вам ...

html5 аудиоплеер - jquery с переключателем воспроизведения / паузы?

поэтому вместо щелчка вы должны использовать setTimeout или setInterval, с которым вам будет удобнее постоянно проверять .paused==false Я думаю, что вы сможете проверить, завершено ли это, проверив длину видео и сравните его с максимальной длиной == конец файла.