These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:11 pm Advanced search

Best Method for Playing <audio> Files Sequentially?

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

Best Method for Playing <audio> Files Sequentially?

Postby LFReD » Wed Jul 07, 2010 5:11 pm

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
<h6>
 
Posts: 4
Joined: Wed Jul 07, 2010 5:05 pm

Postby LFReD » Wed Jul 07, 2010 8:11 pm

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();
}
LFReD
<h6>
 
Posts: 4
Joined: Wed Jul 07, 2010 5:05 pm

Postby zcorpan » Thu Jul 08, 2010 1:27 pm

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.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Postby LFReD » Thu Jul 08, 2010 3:42 pm

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
<h6>
 
Posts: 4
Joined: Wed Jul 07, 2010 5:05 pm

Postby LFReD » Thu Jul 08, 2010 3:49 pm

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();
LFReD
<h6>
 
Posts: 4
Joined: Wed Jul 07, 2010 5:05 pm

Postby zcorpan » Thu Jul 08, 2010 6:01 pm

LFReD wrote:Your example only plays the first file. The audios[i].onended event isn't firing.
That's a bug in Firefox.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 2 guests