I am having a playlist of mp3s in my website. When you click play the first song starts and when it is done it plays the next one until the playlist is over.
Everything works fine in Chrome but in Safari 7 ( Mavericks ) if the tab is not on focus after the first song finishes the second is not started until I focus the tab.
my code looks like this:
function play( song_path ){
var html = ""+
'<audio id="html_player" controls autoplay>' +
' <source src="'+ song_path + '" type="audio/mpeg">'+
'</audio>';
$("#player_element").html( html );
var song = $("audio")[0];
song.play();
$(song).on('ended', function() {
playNext();
});
}
the function playNext() gets the url of the next song and calls play( new_url ).
Any ideas how to overcome this problem ?