html5让网页音乐暂停时慢慢停止
展开全部
如果使用audio自带的控制按钮,JS代码无法控制它的播放和暂停。需要添加自己的播放按钮和暂停按钮,然后在js代码中控制audio的播放和暂停,利用计时器定时增加或减少音量。
以下是我亲自测试过可以达到你要的效果的代码,细节需要你调整定时器的时间间隔和每次音量改变幅度。
下面是HTML部分的写法
<body>
<audio id="player" src="这里是你要播放的音乐.mp3"></audio>
<button type="button" onclick="fadeIn()">播放</button>
<button type="button" onclick="fadeOut()">暂停</button>
</body>
下面是JS部分的写法
function fadeOut(){
var player=document.getElementById("player");
var vol=player.volume;
var t=setInterval(function(){
vol-=0.01;
if(vol>0){
player.volume=vol;
}else{
clearInterval(t);
player.pause();
}
},100);
}
function fadeIn(){
var player=document.getElementById("player");
var defaultVol=player.volume;
player.volume=0;
var vol=0;
player.play();
var t=setInterval(function(){
vol+=0.01;
if(vol<=defaultVol){
player.volume=vol;
}else{
clearInterval(t);
}
},100);
}
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询