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

Have you tried this: http://stackoverflow.com/questions/7652031/how-to-find-audio-is-paused-or-track-finished-in-jquery-html5-audio — Laszlo, Feb 17 '12 at 10:35
yes, that not for delay(), what i mean is how could the 2nd audio file playing after the first one is finish, — Khairu Aqsara, Feb 17 '12 at 10:48

Lloyd · Accepted Answer · 2012-02-21T12:32:26.843

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

thanks Lloyd, that working find, thanks, but i'm not using a ul li child emelement dom, it like a otomatic playing in bakground (background music for some little game) — Khairu Aqsara, Feb 19 '12 at 08:57
this is not intended to be an exact solution for your problem (how can it be, i know nothing about your game).. this is an example to demonstrate handling the `ended` media event - this event fires when playback has ended.. in the handler for this event, write some code to play your second audio file. — Lloyd, Feb 19 '12 at 10:14
thanks, at last it solved my problem, using some of your code make it clear, thanks dude — Khairu Aqsara, Feb 19 '12 at 12:53

score 11 · Answer 2 · edited Dec 19 '14 at 02:54

11

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

edited Dec 19 '14 at 02:54

Jason Aller

3,541
28
38
38

answered Feb 19 '12 at 10:27

Emil L

20,219
3
44
65

this gives a promise exception "the play request was interrupted by new load request" – Jason G Nov 19 '22 at 20:19

score 0 · Answer 3 · edited May 23 '17 at 12:25

0

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.

edited May 23 '17 at 12:25

Community

1
1

answered Feb 17 '12 at 10:33

Val

17,336
23
95
144

how do we made the audio playing after the first one ? is that posible ? when the first audio is finish then the 2nd one continue playing? – Khairu Aqsara Feb 17 '12 at 10:44
@Val is there any advantage using this method over responding to the `ended` event? – Lloyd Feb 21 '12 at 12:25
well I can only offer my knowledge :) I didnt know about the ended event. – Val Feb 21 '12 at 13:41

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

3 Answers3

Linked

Related