Best Method for Playing <audio> Files Sequentially?

[LFReD]

What's the best method that allows returning an array of audio sources (via AJAX), and having them play sequentially? ie: play the audio file, wait for it to end, play the next.

Thanks

[LFReD]

For an array with say, 4 .ogg files, the following works, but is ugly as.

Code: Select all

files = "one,two,three,four";

function sequence(files){
   
   var arr = files.split(",");
   
   var audio = new Audio('sounds/'+arr[0]+'.ogg');
   var audio1 = new Audio('sounds/'+arr[1]+'.ogg');
   var audio2 = new Audio('sounds/'+arr[2]+'.ogg');
   var audio3 = new Audio('sounds/'+arr[3]+'.ogg');

   function play2(){
      audio1.play();
   }
   
   function play3(){
      audio2.play();
   }
   
   function play4(){
      audio3.play();
   }
   
   audio.addEventListener('ended', play2, false);
   audio1.addEventListener('ended', play3, false);
   audio2.addEventListener('ended', play4, false);

   audio.play();
}

[zcorpan]

How about something like:

Code: Select all

var files = "one,two,three,four".split(',');
var audios = [];

for (var i = 0; i < files.length; ++i) {
  audios.push(new Audio('sounds/'+files[i]+'.ogg');
  if (i < files.length - 1)
    audios[i].onended = playNext;
}

var j = 0;
function playNext() {
  j++;
  audios[j].play();
}
audios[0].play();


Both this and your example will load all files up front. This is good if the files are small and you don't want any delay bitween them, but if the files are big then you might want to consider only creating the Audio objects when they are needed to save bandwidth.

[LFReD]

Your example only plays the first file. The audios[i].onended event isn't firing.

Code: Select all

var files = "one,two,three,four".split(',');
var audios = [];

for (var i = 0; i < files.length; ++i) {
  audios.push(new Audio('sounds/'+files[i]+'.ogg'));
  if (i < files.length - 1)
    audios[i].onended = playNext;
}

var j = 0;
function playNext() {
  j++;
  audios[j].play();
}
audios[0].play();

[LFReD]

However, replacing audios.[i].onended with

Code: Select all

audios[i].addEventListener('ended', playNext, false);

works .. thanks

Code: Select all

var files = "one,two,three,four".split(',');
var audios = [];

for (var i = 0; i < files.length; ++i) {
  audios.push(new Audio('sounds/'+files[i]+'.ogg'));
  if (i < files.length - 1)
   audios[i].addEventListener('ended', playNext, false);
}

var j = 0;

function playNext() {
  j++;
  audios[j].play();
}

audios[0].play();

[zcorpan]

Your example only plays the first file. The audios[i].onended event isn't firing.

That's a bug in Firefox.