开发者

Play and pause one HTML5 audio element at a time via jQuery

开发者 https://www.devze.com 2023-02-26 20:29 出处:网络
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.

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();
    });
});


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;
    });
});


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(); 
              }
         });
 });
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号