Cross-Browser HTML5 Playlist
Thanks to this post
Stack Overflow: http://stackoverflow.com/questions/9650103/use-of-reference-to-calling-object-this-using-html5-audio-and-jquery
Editing it I got the playlist that I needed, it works perfectly on Crome and Safari but it won't play at all in other browsers (Tested IE and FireFox; audio not playing, tested Safari with my iPod and no issue) I knew that Firefox doesn't support mp3 files, but it's odd that IE won't play the audio when it does support mp3.
jsFiddle: http://jsfiddle.net/JJd3W/2/
This is what I came up with editing the post above. I integrated jQuery to give a different style to the button, making it look more like the Youtube Play/Pause button.
Better example here:
PlayList: http://daokun.webs.com/jQuery/AudioTest.html
I tried to use jQuery to change the src link in the audio like this
this.next = function (){
count ;
if(count == 2){count = 0;}
$('#uhh').attr('src', 'http://daokun.webs.com/play' count '.mp3');
$('#uhh2').attr('src', 'http://daokun.webs.com/play' count '.ogg');
};
And changing the <audio> `<audio>` tag into this:
<audio id="aud" autoplay autobuffer>
<source id="uhh2" src="http://daokun.webs.com/play0.ogg" type="audio/ogg" />
<source id="uhh" src="http://daokun.webs.com/play0.mp3" type="audio/mpeg" />
</audio>
To make it crossbrowser but after the song changes it won't change the src of the `<source>` tags.
I also tried to edit the next function like this:
this.next = function (){
count ;
if(count == 2){count = 0;}
uhh = 'http://daokun.webs.com/play' count '.mp3';
uhh2 = 'http://daokun.webs.com/play' count '.ogg';
};
And add variabels:
var uhh = $('#uhh').attr('src'),
uhh2 = $('#uhh2').attr('src');
Still doesn't work, is my mystake that I'm trying to mix jQuery with JS so it creates a conflict? Or what am I doing wrong?
Tried this aswell:
var uhh = document.getElementById('aud').firstChild,
uhh2 = document.getElementById('aud').lastChild;
Didn't work so I edited it into this:
var uhh = document.getElementById('uhh'),
uhh2 = document.getElementById('uhh2');
The next function into:
this.next = function (){
count ;
if(count == 2){count = 0;}
uhh.src = 'http://daokun.webs.com/play' count '.mp3';
uhh2.src = 'http://daokun.webs.com/play' count '.mp3';
};
Assigning IDs to the two `<source>`s but nothing. Scr doesn't change and player won't even play the current src, what am I doing wrong?
NOTE: I have asked this on Stack Overflow but no one seems to bother on helping me.. I'm hoping I can find someone to give me a hand.
|