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

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(){});?

Answers:

Answer

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);
    }
});?


?
Answer

If this is your audio tag:

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

then adding an event listener to it for the "ended" event will make it possible to change the source and play your next sound.

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

I think this answer will help you ...

html5 audio player - jquery toggle click play/pause?

so instead of a click you should use a setTimeout, or a setInterval, which ever you feel more comfortable with to check constantly for the .paused==false I think you might be able to check if it is finished by checking videos's length and compare it with max length, which == end of file.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.