html5让网页音乐暂停时慢慢停止

html5让网页音乐暂停时慢慢降低音量,然后播放的时候慢慢加高音量,怎么做?... html5让网页音乐暂停时慢慢降低音量,然后播放的时候慢慢加高音量,怎么做? 展开
 我来答
WMYUOM
2019-05-22 · TA获得超过350个赞
知道小有建树答主
回答量:435
采纳率:78%
帮助的人:209万
展开全部

如果使用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);
   }
o归隐情缘o
2019-05-22 · 而我在远途,在帷幕。所以君不见,卿不遇!
o归隐情缘o
采纳数:618 获赞数:691

向TA提问 私信TA
展开全部
写一个过渡,和一个定时器。当过渡完成执行定时器关闭或播放
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式