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

Ответ 1

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

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

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

markup: (обратите внимание на преднамеренное исключение пробелов между элементами <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>

script:

// 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);
    }
});​


​

Ответ 2

Если это ваш звуковой тег:

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

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

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

Ответ 3

Если вы используете хром, вы должны знать, что в настоящее время есть ошибка, которая не позволяет воспроизводить звуковой тег. Чтобы обойти это, вы можете reset src или программно просто создать новый объект Audio.

Ответ 4

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

html5 audio player - jquery toggle click play/pause?

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