jQuery 全局播放和暂停 HTML5 音频答案

【问题标题】：jQuery global play and pause for HTML5 audiojQuery 全局播放和暂停 HTML5 音频
【发布时间】：2011-08-09 03:22:08
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html audio playback

【解决方案1】：

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

您应该像这样更改global div 的点击处理程序：

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

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

【讨论】：

你做到了！那时谢谢你，现在也谢谢你。我每次都学一点。我明白你在这里做了什么......比我发布的更有意义。但是，在页面的上下文中，我仍然没有得到任何操作。没有暂停或恢复。这是一个 jsFiddle 来演示：jsfiddle.net/danielredwood/FTfSq/11

【解决方案2】：

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

http://www.jplayer.org/

我不久前制作的快速演示。 http://sethaldridge.com/demos/

【讨论】：