javascript - 如何让用户停止执行 HTML5 音频自动播放文件，点击页面上的任何内容？

Question

我正在处理一个页面，根据我的客户的要求，加载播放背景音轨。当然，它仅适用于那些没有在禁用音频自动播放的情况下导航的用户。因此，用于开始播放音乐的简单代码如下所示：

<audio autoplay id="background-soundtrack">
  <source src="mytrack.mp3" type="audio/mpeg">
</audio>

一旦用户点击页面上的任何位置，我想让音乐停止（更好：让它在几秒钟内消失） - 它也应该可以在移动设备上点击。

你能建议我一个聪明的方法来实现我的目标吗？不管是纯 JavaScript 还是 jQuery。

谢谢！

标签： javascriptjqueryhtml5-audio

Answer 1

试试这个jQuery：

$('document').on('click','body',function(){
  if ($('#background-soundtrack').paused == false){
    $('#background-soundtrack').animate({volume: 0}, 1500,
       //1500 duration time
       function(){ 
         $('#background-soundtrack').pause()
       });
  }
});