如何在音频HTML5上淡入/淡出

我正在创建一个简单的背景音乐，只有一个按钮可以播放和停止音乐。 但我想补充淡化。 但是不起作用。

我的代码：

var beepTwo = $("#musicBeat")[0]; beepTwo.play(); $("#dan").click(function() { if (beepTwo.paused == false) { beepTwo.pause(); } else { beepTwo.play(); } }); $beepTwo.animate({volume: newVolume}, 1000); 

的jsfiddle

我发现$audio.animate({volume: newVolume}, 1000); 在另一篇文章，但不适合我，或者我没有正确使用它。 无论如何，我想按下按钮时淡入淡出并淡出。 所以它用fadeIn播放并用fadeOut停止。 我怎样才能做到这一点？

Answer 1

你必须注意HTMLAudioElement（ $('#musicBeat')[0] ）和jQuery Object（ $('#musicBeat') ）之间的$('#musicBeat') 。

play是HTMLAudioElement的一个方法，所以你必须通过它访问它（就像你一样），但.animate是一个jQuery方法，只能在jQuery对象上调用。

而且你必须指定newVolume（不能将其留空）。

 var beepTwo = $("#musicBeat"); beepTwo[0].play(); $("#dan").click(function() { if (beepTwo[0].paused == false) { beepTwo.animate({volume: 0}, 2000, 'swing', function() { // really stop the music beepTwo[0].pause(); }); } else { beepTwo[0].play(); beepTwo.animate({volume: 1}, 2000); } });