我正在处理一个页面,根据客户的要求,加载播放背景配乐。 当然,它仅适用于那些未在禁用音频自动播放的情况下导航的用户。 因此,用于开始播放音乐的简单代码段如下所示:
<audio autoplay id="background-soundtrack">
<source src="mytrack.mp3" type="audio/mpeg">
</audio>
我想让音乐在用户点击页面上的任何地方后立即停止(甚至更好:让它在几秒钟内淡出(——它也应该在移动设备上点击。
你能告诉我一个聪明的方式来实现我的目标吗? 不管是纯JavaScript还是jQuery。
谢谢!
试试这个jquery:
$('document').on('click','body',function(){
if ($('#background-soundtrack').paused == false){
$('#background-soundtrack').animate({volume: 0}, 1500,
//1500 duration time
function(){
$('#background-soundtrack').pause()
});
}
});
HTML5 音频元素具有暂停方法,您可以在正文、文档、窗口上的"onClick"(也在联系中工作(事件中使用该方法...... 像这样(我删除id中的"-"(:
document.onclick = function(e){
backgroundsoundtrack.pause();
}
<audio autoplay id="backgroundsoundtrack">
<source src="mytrack.mp3" type="audio/mpeg">
</audio>