Воспроизведение и приостановка одного аудиоэлемента HTML5 за раз с помощью jQuery

Я ' У меня есть несколько аудиоэлементов 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();
    });
});
7
задан technopeasant 19 April 2011 в 20:03
поделиться