Is a jquery callback available after .play() when

Question

Guys how do I play an mp3 file and then another once the first has finished?

I have tried the following without success..

$('#file1)[0].play( function () {
   $('#file2)[0].play();
});

Can you use callbacks when playing audio?

Answer 1

According to W3Schools, you can use the onended event to detect if the HTML5 audio has finished playing.

In jQuery:

$("#player").bind('ended', function(){
    // done playing
    alert("Player stopped");
});

For a demonstration see: http://jsfiddle.net/9PCEf/2/

You can do the rest after audio playing finished.

Answer 2

You are not calling a jQuery method to begin with.

You could attach an event handler to the "onended" event:

var file = $("#file1");

file.on( "ended", function(){
    $("#file2")[0].play();
});

file[0].play();

Answer 3

You need to listen to the onended event.

Answer 4

I used @blasteralfred's code to create a function to play a indefinite series of sound files using jQuery:

function playSounds(soundFileIds) {
  if (soundFileIds instanceof Array) {
    var soundFileId = soundFileIds.shift();
    playSound(soundFileId);
    $(soundFileId).bind('ended', function() {
      playSounds(soundFileIds);
    });
  } else {
    playSound(soundFileIds);
  }
}

The conditional test for an array allows me to backport this to my existing code that calls this function with just a string. Thanks!