使用 jquery 自动播放和停止 html5 音频答案

【问题标题】：Auto play and stop html5 audio with jquery使用 jquery 自动播放和停止 html5 音频
【发布时间】：2012-06-08 08:18:59
【问题描述】：

我有一个小问题。

我在覆盖上有一个类似 facebook 的框窗口。当用户单击喜欢时，此框会隐藏 - 显然。我想在此窗口可见时使用音频元素，并在此窗口隐藏时停止音频。所以这是我的 html 和 jquery。请帮我。

<audio id="audio_player" loop="loop">
    <source src="fileadmin/templates/main/crowd.mp3" type='audio/mpeg; codecs="mp3"'>
    <source src="fileadmin/templates/main/crowd.ogg" type='audio/ogg; codecs="vorbis"'>
</audio>

$(document).ready(function(){
function audio_player (){
    if (
        $('fb_like_box').css('display','block')){
            $('audio').each(function() {
                var song = $(this);
                    song.play();
                });
    }
    else if (
        $('fb_like_box').css('display','none')) {
            $('audio').each(function() {
                var song = $(this);
                    song.pause();
                });
    }
    else {}
}
});

【问题讨论】：

标签： jquery css html audio playback

【解决方案1】：

您的代码语法错误。

首先，下面的语法用于赋值。

$('#fb_like_box').css('display','block')

它将属性block分配给元素$('#fb_like_box');

如果你想检查它，你可以使用这样的东西：

if($('#fb_like_box').css('display') == 'block') {
    // then do something
}

做你正在尝试的一个好方法是：

if ($('#fb_like_box').is(':visible')) {

    $('audio').each(function() {
        $(this).play();
    });

} else {

    $('audio').each(function() {
        $(this).pause();
    });

}

【讨论】：

mylovedcreation.pl/wp-content/uploads/2012/06/…
@ŁukaszBorawski，您的选择器是$(".fb_like_box")

【解决方案2】：

尝试一些非常基本的东西，比如

$(document).ready(function(){
  $('audio')[0].play();
}

如果这样运行，至少你知道你在正确的轨道上。一旦你知道你可以玩它，添加条件，然后测试它们是否有效。

【讨论】：

【解决方案3】：

使用:visible选择器并根据fb_like_box是什么添加.或#。 fb_like_box 不是有效的选择器。假设它是一个 ID

if ($('#fb_like_box').is(':visible')){
      // like box visible, play audio
            $('audio').each(function() {
                var song = $(this);
                    song.play();
                });
    }
    else {
      // like box hidden pause audio  
            $('audio').each(function() {
                var song = $(this);
                    song.pause();
                });
    }

【讨论】：

【解决方案4】：

我认为主要问题是您应该在隐藏 facebook 字段的那一刻运行该函数，因此，您需要将该函数添加到足够的侦听器中。我认为在这种情况下它会是'DOMAttrModified'：

一些伪代码（未经测试的代码）：

$('facebookelementtohide').addEventListener('DOMAttrModified', function(e){
   audio_player ();
}, false);

【讨论】：