Ask Experts Questions for FREE Help !
Ask
    Daklii's Avatar
    Daklii Posts: 1, Reputation: 1
    New Member
     
    #1

    Mar 14, 2012, 02:15 PM
    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.

Check out some similar questions!

What are good songs for my weird al playlist at playlist.com [ 1 Answers ]

I want my weird al playlist to have at least 100 songs, but only the best and funniest songs. I don't want songs that sound like rap.

Cross browser support, I think [ 5 Answers ]

www.climate-controls.com a site that I am creating works in IE8 but when I view it in Firefox, Safari, Chrome... aaaarghhhh! Can someone explain what is wrong, I'm not even sure I know what to type into a search engine to find out what, where or whatever. Cheers Colin


View more questions Search
 

Question Tools Search this Question
Search this Question:

Advanced Search

Add your answer here.