Воспроизведение и приостановка одного аудиоэлемента 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();
    });
});

javascript html audio jquery playback
person technopeasant    schedule 19.04.2011    source источник
comment
Что вы пробовали? ... никто не собирается просто писать это за вас. Ну, большинство людей, то есть.   -  person mattsven    schedule 19.04.2011
comment
@NeXXeuS. Я слышу тебя. Пробовал несколько разных вещей, все с грубым синтаксисом. Утверждения if/then трудно уложить в голове. Я добавлю свою концепцию к вопросу   -  person technopeasant    schedule 20.04.2011

Ответы (2)


arrow_upward
6
arrow_downward 

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;
    });
});
person mattsven    schedule 19.04.2011
comment
@NeXXeuS, и я люблю тебя за это. Ваша функция отлично воспроизводит песни, приостанавливая другие активные песни ... но больше не приостанавливает воспроизводимую песню, если вы снова нажмете на нее. - person technopeasant; 20.04.2011
comment
@NeXXeuS. Моя ошибка, поясню. Страница загружается и все игроки молчат, как и должно быть. Щелчок по одному воспроизводит его соответствующим образом, а щелчок по другому во время воспроизведения приостанавливает первый и воспроизводит новый (идеально!). Единственная проблема заключается в том, что щелчок по тому, что воспроизводится, больше не приостанавливает его. - person technopeasant; 20.04.2011
comment
Я предполагаю здесь, но попробуйте отредактировать мой ответ, который я только что сделал. - person mattsven; 20.04.2011

arrow_upward
3
arrow_downward

Эта маленькая функция работает для меня. Он останавливает воспроизведение всех других аудиоэлементов на странице и позволяет продолжать воспроизведение того, который был запущен. Вот скрипка.

 $("audio").on("play", function (me) {
         jQuery('audio').each(function (i,e) {
              if (e != me.currentTarget)
              { 
                  this.pause(); 
              }
         });
 });
person Hagbourne    schedule 07.02.2014
comment
Это отлично работает для меня на моем сайте nallikayi.com. Можно ли это сделать в javascript? - person Sharath kumar; 04.01.2017