How to play all audio sources with html5 and jQuery

Question

I'm trying to make a simple audio player using just html5 and jQuery. It works well when I want to play one file/stream, or when I click on a next/preview or another file in playlist.

But I need a player which can play automatically all files from playlist.

I tried $.each(), I tried a recusive function ... but no success...

I can show a part of code here:

var el = $('#playerbox');
var soundType = el.data('page-soundtype');
var soundFile = el.data('page-soundfile');
var soundFiles = el.data('page-soundfiles');//playlist, paths to sources
var audio = $("<audio preload />");
//make 2 types of sources for different browsers:
var source1= $('<source />').attr('type', 'audio/mpeg');  // original, mp3 format
var source2= $('<source />').attr('type', 'audio/ogg'); // a copy, ogg format
audio.append(source1).append(source2);
el.append(audio);
var player=audio[0];
player.volume=0;
var i=0; //The play list counter, in case we have it
var op={}; //player options

var runPlayer = function(op){
    var fadetime = (op.fadetime || 1000);
    player.oncanplay = function(){
        player.play();
        audio.animate({volume: 1}, fadetime);
    }
    if(soundType === 'list'){
        player.addEventListener('ended', function(){
            i++;
            if(soundFiles[i].length>0){
                source1.attr('src', soundFiles[i]);
                source2.attr('src', soundFiles[i].replace(".mp3", ".ogg"));
                op.fadetime = 1500;
                player.pause();
                runPlayer(op);
            }
        }, false)
       }
}
//set sources
if(soundType==='list' && $.isArray(soundFiles)){
    //prepare playlist
    source1.attr('src', soundFiles[i]);
    source2.attr('src', soundFiles[i].replace(".mp3", ".ogg"));
    op.fadetime = 1;            
}
else if(soundType==='sound'){
    //prepare sound
    source1.attr('src', soundFile);
    source2.attr('src', soundFile.replace(".mp3", ".ogg"));
}
runPlayer(op);

So, the first audio source is playing well, then the second loads to player's "src", but doesn't play :(

Where is my mistake? Thanks.

Once you have added the new source, do you ever invoke source1.play() ? — Liam Schauerman
I don't add a new source, I just change the SRC of the existing sources of <audio> element and try to run the player again. — Denis Monn
Ok that's all I meant. So once you update the src attribute, I think you need to call .play() on the audio element — Liam Schauerman

Liam Schauerman Liam Schauerman · Accepted Answer · 2015-01-17T21:21:53

once the new src is loaded, you will have to call .play() on that element

here is an example of how to play all audio files in a queue

var el = $('#playerbox'); //assuming here that el is your <audio> element
var audioSources = [song1.mp3, song2.mp3....]// here is your array of filenames
var index = 0;

function playNext(index){
  el.attr('src', audioSources[index]);
  el.play(); //this will play the element
  el.on('ended', function(){ //this will bind a function to the "ended" event
    //increment the index to target the next element
    index++;
    if(index < audioSources.length){
      //plays the next song and binds the function to the ended event again until the queue is empty
      playNext(index);          
    }
  }
}
playNext(index);

Does this work for you?

How to play all audio sources with html5 and jQuery

1 Answers