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.