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.