使用jQuery自动播放和停止HTML5音频

Question

我有一个小问题。

我在叠加层上有一个Facebook类似框窗口。当用户点击“喜欢”时，这个框就会隐藏。我想当这个窗口可见时使用音频元素，并在这个窗口隐藏时停止音频。

以下是我的HTML和jQuery，请帮我修改。 ```html

我有一个小问题。

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

- Lukas

Answer 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();
    });

}

- Starx

---

http://mylovedcreation.pl/wp-content/uploads/2012/06/Zrzut-ekranu-2012-06-4-o-11.06.42.png - Lukas

@ŁukaszBorawski，你的选择器是$(".fb_like_box")。 - Starx

Answer 2

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

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

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

- Last Rose Studios

Answer 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();
                });
    }

- Prasenjit Kumar Nag

Answer 4

我认为主要的问题是应该在Facebook字段被隐藏的那一刻运行函数，因此，您需要将函数添加到适当的侦听器中。

我认为在这种情况下，最好使用'DOMAttrModified'：

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

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

- Mario Corchero