HTML5中用audio实现音量淡入淡出效果

在HTML5中支持了audio标签,可以直接在网页中嵌入声音文件,太方便了。可以控制自动播放、预加载、循环播放等属性,一般的需求够了,但有时候会需要声音按照一定的节奏慢慢变大或者变小,该怎么做呢?且往下看代码吧。。

HTML5中用audio实现音量淡入淡出效果

<audio id="bg-player" src="/upload/example.mp3" loop preload="true" autoplay="true" controls></audio> <script type="text/javascript"> var audio = document.getElementById("bg-player"); audio.addEventListener('canplaythrough', function(){this.volume=0.05;}, false); var audioInterval = setInterval(function() { var volume = audio.volume; if(!volume) { return; } if(volume >= 0.95) { return; } if(volume) { audio.volume += 0.05; } }, 1000); </script>

参考资料:http://msdn.microsoft.com/zh-CN/ie/hh377903

相关阅读