jQuery глобальное воспроизведение и пауза для аудио HTML5 - PullRequest
Новая
       9

jQuery глобальное воспроизведение и пауза для аудио HTML5

1 голос
/ 20 апреля 2011

У меня есть страница, полная аудио-тегов HTML5, каждый из которых может переключаться между воспроизведением и паузой, и только один может воспроизводить одновременно. Я работаю над набором глобальных элементов управления, которые будут воспроизводить / приостанавливать все, что активно, сканирование на начало или на предыдущую дорожку и на следующую дорожку. Если у вас есть идеи или решения, которые могут помочь мне решить все эти вопросы, пожалуйста, говорите:)

Что касается глобального звука, я собрал воедино то, что считаю теоретически осуществимым, но не получаю никаких результатов. Нет ошибок через Firebug ... Не уверен, куда идти отсюда.

Ваш совет очень ценится!

HTML: 

<div id="global"></div>    
<div id="music_right">
            <div class="thumbnail" id="paparazzi">
                <a class="playback">
                    <img class="play" src="../images/icons/play.png" />
                </a>
                <audio>
                    <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
                    <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
                    <source src="../audio/fernando_garibay_paparazzisnlmix.wav" type="audio/x-wav" />
                    Your browser does not support HTML5 audio.
                </audio>
            </div>
            <div class="thumbnail" id="danceinthedark">
                <a class="playback">
                    <img class="play" src="../images/icons/play.png" />
                </a>
                <audio>
                    <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
                    <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
                    <source src="../audio/fernando_garibay_danceinthedark.wav" type="audio/x-wav" />
                    Your browser does not support HTML5 audio.
                </audio>
            </div>
            <div class="thumbnail" id="bornthisway">
                <a class="playback">
                    <img class="play" src="../images/icons/play.png" />
                </a>
                <audio>
                    <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
                    <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
                    <source src="../audio/fernando_garibay_bornthisway.wav" type="audio/x-wav" />
                    Your browser does not support HTML5 audio.
                </audio>
            </div>
        </div>

JavaScript: 

//global play/pause

        $('#global').click(function(){
        var song = $('audio');
        if(song.paused){
            song.play();
         } else {
             song.pause();
         }
    });
    //audio tag play/pause
        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;
            });
        });

Ответы [ 2 ]

3 голосов
/ 20 апреля 2011

Вчера я помог вам с другим вопросом для этого проекта.

Вы должны изменить свой обработчик кликов для global div следующим образом: 

$('#global').click(function(){
    $('audio').each(function() {
      var song = $(this);
      if(song.paused){
        song.play();
       } else {
         song.pause();
       }
     });
});

Когда высделайте что-то вроде var song = $("audio");, переменная song в итоге представляет коллекцию всех <audio> элементов на странице, и поэтому она не работает, когда вы проверяете song.paused, потому что вы не имеете дело с отдельным аудиоэлементом вэтот момент.

1 голос
/ 20 апреля 2011

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

http://www.jplayer.org/

Quick Demo Я сделал некоторое время назад. http://sethaldridge.com/demos/

...