用javascript实现html5 播放音乐的淡出效果
最近在做一个东西,里面用到了html5播放音乐,但是我想在一定的时候使用淡出效果关闭音乐。
几经查找,终于找到了解决办法,代码如下:
html部分
<audio preload="auto" id="music">
<source src="music.mp3" />
</audio>
js部分
function FadeOut() {
var music = document.getElementById('music');
audioElement = music;
$(audioElement).on('timeupdate', function() {
var vol = 1,
interval = 200; // 200ms interval
if (audioElement.volume == 1) {
var intervalID = setInterval(function() {
// Reduce volume by 0.05 as long as it is above 0
// This works as long as you start with a multiple of 0.05!
if (vol > 0) {
vol -= 0.05;
// limit to 2 decimal places
// also converts to string, works ok
audioElement.volume = vol.toFixed(2);
} else {
// Stop the setInterval when 0 is reached
clearInterval(intervalID);
}
}, interval);
}
});
}
如果需要淡入效果,也可以参考一下
作者: Lerry
发表时间:2013-05-17
版权说明:CC BY-NC-ND 4.0 DEED