HTML5 audio playlist - how to play a second audio file after the first has ended?

Question

How could we make some audio in html5 play after another one has finished?

I have tried with jquery delay() function but it wont work at all, is it possible using pause() in html5 audio with timer instead ? For example, pause('500',function(){});?

Answer 1

Here's a JSLinted, unobtrusive Javascript example demonstrating how to handle and use the ended mediaevent. In your particular situation, you would trigger playback of the second audio file in your ended event handler.

You can use the code below or run the test fiddle.

Click an item in the playlist to begin playback. After one audio ends, the next will begin.

markup: (note the deliberate avoidance of whitespace between <li> elements - this is to simplify traversing the DOM with 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);
    }
});​


​