HTML5 crossbrowser Playlist

Question

With the help from this question Use of reference to calling object (this) using HTML5 audio and jQuery.

Editing it I got the playlist that I wanted, it works perfectly on Crome and Safari but it won't play at all in other browsers, understable, since not all browsers support MP3 files. (Tested IE and Firefox; audio not playing, tested Safari with my iPod and no issue) But it's odd that IE won't play the audio when it does support MP3.

jsFiddle

This is what I came up with editing the question linked 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

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> 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 variables:

var uhh = $('#uhh').attr('src'),
    uhh2 = $('#uhh2').attr('src');

Tried this aswell and still nothing.

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 (uhh and uhh2) but nothing.

I've noticed by checking the source code with Chrome that the src links on the two <source> DOES change, but the issues is that the MP3 files aren't "loaded" into the page, by checking the resources tab. While using the <audio> tag only the new MP3 files are "loaded" into the page and played.

So what is that I'm doing wrong? Or what's happening that it doesn't work?

score 1 · Answer 1 · answered Mar 15 '12 at 20:20

1

It looks like you're doing alot here, and I like the effort you're putting into it. It would seem to me that the only thing you're not doing is 'capturing the event'.

$("#aud").addEventListener('ended', function(){
  this.currentTime=0;
  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');
  };
}, false);

Then add 'controls preload' to the audio tag

<audio id="aud" autoplay autobuffer controls preload">

You should be able to capture the 'end' of the event with that. I'm not the most savvy HTML5 expert yet, only been dabbling for a bit now.

Anyway, something like the above example will get you what you want now that you can capture the 'end' of a song; I got this example from:

HTML 5 Audio Loops

answered Mar 15 '12 at 20:20

Ohgodwhy

49,779
11
80
110

Thanks alot. I'll try that. Hopefully it'll work. Btw I can take off the controls right? Since I'm controlling only the Play/Pause via a button tag. – Marian Mar 15 '12 at 20:26
Oh and thanks again for answering, I asked this before here, most same exact question and same thing in two forums. No one seemd to really bother ._. – Marian Mar 15 '12 at 20:26
I just tried your suggestion. Doesn't seem to work... the function isn't executing at all, after song ends that's it. tried to replace `$('#aud')` with `aud.` Nothing. – Marian Mar 15 '12 at 20:39
The above isn't formatted perfectly. The event listener 'added' is the same as what you are trying to achieve with 'this.next'. 'ended' is literally telling the DOM that the song is over, go to the next song. If you need to capture it then you can remove the this.next = function portion and use count ++; if(count == 2){count == 0;}, then you can change the attributes after that. – Ohgodwhy Mar 15 '12 at 20:42
Yeah right now I removed the this.next function and after ended count++; and the rest comes. I'll see how that ends – Marian Mar 15 '12 at 20:44
Damn. Test is over and guess what? The scr links on the `` tags change but.. no music playing :/ "play"+count works (even tho just a test for the counter) but same issue as above when scr change and nothing else happens. – Marian Mar 15 '12 at 20:50
Maybe it's better to use the loop example in the link you gave me.. instead of looping the same song it'll kick in a new one using multiple audio tags. Even tho I don't like it because I won't be able to play/pause it at will. Thanks for the help but I guess this player has no solution. – Marian Mar 15 '12 at 21:37

HTML5 crossbrowser Playlist

1 Answers1