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

Question

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

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

我想让音乐在用户点击页面上的任意位置后立即停止（甚至更好：让它在几秒钟内淡出）——它在移动设备上也应该可以工作。

你能给我一个实现目标的聪明方法吗？是纯 JavaScript 还是 jQuery.

都没关系

谢谢！

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

Answer 2

HTML5 音频元素具有暂停方法，您可以在正文、文档、window... 像这样（我删除了id中的“-”）：

document.onclick = function(e){
  backgroundsoundtrack.pause();
}

<audio autoplay id="backgroundsoundtrack">
  <source src="mytrack.mp3" type="audio/mpeg">
</audio>

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

How to make users STOP the execution of an HTML5 audio autoplay file clicking anything on the page?

javascript

jquery

html5-audio