在jQuery中添加音频暂停前的延迟
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在jQuery中添加音频暂停前的延迟相关的知识，希望对你有一定的参考价值。
我试图在用户在div上停留时淡入一个音频文件。
淡入工作正常，但在淡出完成之前，音频被暂停。这是我目前的代码。
$(function () {
$('#playmusic').hover(
function () {
$('#music')[0].play();
$('#music').animate({volume: 1}, 1000);
},
function () {
$('#music').animate({volume: 0}, 1000);
$('#music')[0].pause();
}
)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="playmusic">hover to hear audio</p>
<audio id="music" preload="auto">
<source src="https://upload.wikimedia.org/wikipedia/commons/e/ec/A_Tale_of_Distant_Lands.mp3" type="audio/mpeg">
</audio>我想我需要添加一个 .delay 到我的代码中，使音频在淡出后暂停，但是下面的内容却给我一个错误。
$('#music').delay(1000).[0].pause();
有人知道我哪里做错了吗？
答案
如果你想延迟停止，可以用setTimeout来执行。
下面是一个例子
setTimeout(function(){
$('#music')[0].pause();
}, 1000);
时间以毫秒为单位设置。
该 拖延 函数用于jQuery的效果，包括动画，其他的东西最好使用 setTimeout.
另一答案
我建议使用动画的 complete 回调 暂停音频。它在动画结束后，也就是在音频渐变完成后启动。
与使用独立的定时器相比，这种方法的一个优点是，无论动画的持续时间长短，只要动画完成，音频就会暂停。
使用这种格式提供回调函数。
.animate( properties [, duration] [, easing] [, complete] )
完整 类型。Function() 动画完成后调用的函数，每个匹配元素调用一次。
或者，使用一个 另一种格式 来指定选项。
.animate( properties, options )
我还建议使用 stop() 以防止动画排队。否则，在快速悬停触发时，动画的积累会让人感到困惑。
下面是一个示范。
$(function() {
let $music = $('#music');
function playMusic() {
$music
.stop(true, false)
.animate({
volume: 1
}, {
duration: 1000,
start: function() {
this.play();
}
});
}
function pauseMusic() {
$music
.stop(true, false)
.animate({
volume: 0
}, {
duration: 1000,
complete: function() {
this.pause();
}
});
}
$('#playmusic').hover(
playMusic,
pauseMusic
);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="playmusic">hover to hear audio</p>
<audio id="music" preload="auto">
<source src="https://upload.wikimedia.org/wikipedia/commons/e/ec/A_Tale_of_Distant_Lands.mp3" type="audio/mpeg">
</audio>以上是关于在jQuery中添加音频暂停前的延迟的主要内容，如果未能解决你的问题，请参考以下文章
通过获取 .attr 使用 JavaScript/jquery 播放/暂停音频文件