CODEWITHSUNDEEP
javascriptjqueryhtmlaudioplayback
technopeasant
technopeasant

Reputation: 7939

jQuery global play and pause for HTML5 audio

I've got a page full of HTML5 audio tags, each of which can toggle between play and pause, and only one can play at a time. I'm working on a set of global controls that will play/pause whatever is active, scan to beginning or previous track, and next track. If you have any ideas or solutions that can help me solve all of those please speak up :)

Regarding the global audio, I've botched together what I consider theoretically feasible, but am not getting any results. No errors via Firebug... Not sure where to go from here.

Your advice is much appreciated!

HTML:

<div id="global"></div>    
<div id="music_right">
            <div class="thumbnail" id="paparazzi">
                <a class="playback">
                    <img class="play" src="../images/icons/play.png" />
                </a>
                <audio>
                    <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
                    <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
                    <source src="../audio/fernando_garibay_paparazzisnlmix.wav" type="audio/x-wav" />
                    Your browser does not support HTML5 audio.
                </audio>
            </div>
            <div class="thumbnail" id="danceinthedark">
                <a class="playback">
                    <img class="play" src="../images/icons/play.png" />
                </a>
                <audio>
                    <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
                    <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
                    <source src="../audio/fernando_garibay_danceinthedark.wav" type="audio/x-wav" />
                    Your browser does not support HTML5 audio.
                </audio>
            </div>
            <div class="thumbnail" id="bornthisway">
                <a class="playback">
                    <img class="play" src="../images/icons/play.png" />
                </a>
                <audio>
                    <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
                    <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
                    <source src="../audio/fernando_garibay_bornthisway.wav" type="audio/x-wav" />
                    Your browser does not support HTML5 audio.
                </audio>
            </div>
        </div>

JavaScript:

//global play/pause

        $('#global').click(function(){
        var song = $('audio');
        if(song.paused){
            song.play();
         } else {
             song.pause();
         }
    });
    //audio tag play/pause
        var curPlaying;
        $(function() {
            $(".playback").click(function(e){
                e.preventDefault();
                var song = $(this).next('audio')[0];
                if(song.paused){
                    song.play();
                    if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
                } else {
                    song.pause();
                    }
                curPlaying = $(this).parent()[0].id;
            });
        });

Upvotes: 1

Views: 10071

Answers (2)

jessegavin
jessegavin

Reputation: 75650

I helped you out on a different question for this project yesterday I think.

You should change your click handler for the global div like so:

$('#global').click(function(){
    $('audio').each(function() {
      var song = $(this);
      if(song.paused){
        song.play();
       } else {
         song.pause();
       }
     });
});

When you do something like var song = $("audio"); the song variable ends up representing a collection of all the <audio> elements on the page and that's why it doesn't work when you check song.paused because you're not dealing with an individual audio element at that point.

Upvotes: 3

Seth
Seth

Reputation: 6260

You may not be looking for a plugin, but this one is really great. It also will play the audio on a mobile device.

http://www.jplayer.org/

Quick Demo I made a while back. http://sethaldridge.com/demos/

Upvotes: 1

Related Questions