HTML5 音频的 jQuery 全局播放和暂停

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"); 之类的操作时，song 变量最终代表一个集合页面上所有 元素的数量，这就是为什么当您检查 song.paused 时它不起作用，因为您没有处理单个音频元素在那一点上。

Answer 2

您可能不是在寻找插件，但这个插件确实很棒。它还将在移动设备上播放音频。

http://www.jplayer.org/

我不久前做了一个快速演示。
http://sethaldridge.com/demos/