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

Question

我有个小问题。

我在叠加层上有一个类似 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 {}
}
});

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

}