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

Question

我正在处理一个应客户要求而加载播放背景音乐的页面。当然，这仅适用于未在禁用音频自动播放的情况下进行导航的用户。因此，用于开始播放音乐的简单代码如下：

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

我想让音乐停止播放（甚至更好：在几秒钟内消失），只要用户在页面上的任意位置单击，它也可以在移动设备上进行点击。

您能否建议我以一种聪明的方式实现我的目标？纯粹是JavaScript还是jQuery都没关系。

谢谢！

Answer 1

尝试这个jQuery：

$('body').on('click',function(){
  if ($('#background-soundtrack').paused == false)
      $('#background-soundtrack').pause();
});