自动播放和停止jQuery的html5音频

我有一个覆盖面上的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 {} 
} 
});

来源

2012-06-04 Lukas

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

来源

2012-06-04 08:32:37

真的，我选择忘记以前点，但门槛不工作 – Lukas

我认为主要的问题是，你应该运行该功能时，在该领域的Facebook隐藏的时刻，因此，你需要添加的功能去充分的倾听者。我认为在这种情况下，这将是“DOMAttrModified”：

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

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

来源

2012-06-04 08:39:13

您的代码语法错误。

首先，以下语法用于赋值。

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

}

来源

2012-06-04 08:43:24 Starx

不工作:( – Lukas

@ŁukaszBorawski，让我看看你fb_like_box – Starx

标记HTML或JS的标记 – Lukas

尝试一些非常基本的像

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

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

来源

2013-07-19 21:15:31

回答

相关问题