javascript - 通过 jQuery 一次播放和暂停一个 HTML5 音频元素

Question

我在一个页面上有几个 HTML5 音频元素，我正在使用 jQuery 来播放和暂停它们。播放和暂停功能可以正常工作，但轨道可以同时播放。

如何重写这段代码，以便一次只能播放一首歌曲？也就是说.. 如果一个正在播放，而您点击了另一个，则暂停上一个并播放最近的点击。

谢谢!

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:(有效，但单独播放/暂停)

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

JavaScript:(我的丑陋概念)

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

Answer 1

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

这应该有效。

编辑:

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