jQuery全局播放和HTML5音频暂停

Question

我有一个充满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;
            });
        });

Answer 1

我想，昨天我帮助你解决了这个项目的另一个问题。

您应该更改global div的单击处理程序，如下所示：

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

当你做var song = $("audio");类的事情时var song = $("audio"); 歌曲变量最终表示页面上所有<audio>元素的集合，这就是为什么当你检查song.paused时它不起作用的原因，因为那时你没有处理单个音频元素。

Answer 2

您可能不会寻找插件，但这个非常棒。 它还将在移动设备上播放音频。

http://www.jplayer.org/

快速演示我做了一会儿。 http://sethaldridge.com/demos/