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

Вот 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);
    }
});​


​

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

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

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

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

Я думаю, что этот ответ поможет вам...

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

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