8

I've got several HTML5 audio elements on a page and am using jQuery to play and pause them. The play and pause functions work appropriately, but the tracks can all be played at the same time.

How can I rewrite this code so that only one song can be played at a time? That is.. if one is playing and you click on another, pause the previous and play the most recent click.

Thank you!

HTML:

<div id="music_right">
        <div class="thumbnail" id="paparazzi">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
            </a>
            <audio>
             <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
        <div class="thumbnail" id="danceinthedark">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
            </a>
            <audio>
             <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
        <div class="thumbnail" id="bornthisway">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
            </a>
            <audio>
             <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
    </div>

JavaScript: (that works, but plays/pauses individually)

$(function() {
    $(".playback").click(function(e) {
        e.preventDefault();
        var song = $(this).next('audio').get(0);
        if (song.paused)
            song.play();
        else
            song.pause();
    });
});

JavaScript: (ugly concept of mine)

$(function() {
    $(".playback").click(function(e) {
        e.preventDefault();
        var song = $(this).next('audio').get(0);
        if (song.paused)
            song.play();
            song.not($(this).pause();
        else
            song.pause();
    });
});
technopeasant
  • 7,809
  • 31
  • 91
  • 149
  • 2
    What have you tried?...no one is going to just write it for you. Well, most people, that is. – mattsven Apr 19 '11 at 19:52
  • @NeXXeuS. I hear you. Tried a few different things all with gross syntax. If/then statements are difficult for me to wrap my head around. I'll add my concept to the question – technopeasant Apr 19 '11 at 20:00

2 Answers2

6
var curPlaying;

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

That should work.

EDIT:

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;
    });
});
mattsven
  • 22,305
  • 11
  • 68
  • 104
  • @NeXXeuS and I love you for it. Your function plays the songs while pausing other active songs perfectly.. but no longer pauses the song that's playing if you click on it again. – technopeasant Apr 19 '11 at 20:08
  • @NeXXeuS. My mistake, let me clarify. The page loads and all players are silent, as they should be. Clicking on one plays it appropriately, and clicking on a different one while it's playing pauses the first and plays the new one (perfect!). The only problem is that clicking on whichever one is playing no longer pauses it. – technopeasant Apr 19 '11 at 20:33
  • I'm guessing here, but try the edit to my answer I just made. – mattsven Apr 19 '11 at 21:02
3

This little function works for me. It stops all other audio elements playing on the page and lets the one that has been started keep playing. Here is a fiddle.

 $("audio").on("play", function (me) {
         jQuery('audio').each(function (i,e) {
              if (e != me.currentTarget)
              { 
                  this.pause(); 
              }
         });
 });
Nikolai Samteladze
  • 7,699
  • 6
  • 44
  • 70
Hagbourne
  • 96
  • 7