如何让用户停止执行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 音频元素具有暂停方法，您可以在正文、文档、窗口上的"onClick"(也在联系中工作(事件中使用该方法...... 像这样(我删除id中的"-"(：

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

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