欧美亚洲中文,在线国自产视频,欧洲一区在线观看视频,亚洲综合中文字幕在线观看

      1. <dfn id="rfwes"></dfn>
          <object id="rfwes"></object>
        1. 站長資訊網(wǎng)
          最全最豐富的資訊網(wǎng)站

          html5中關(guān)于volume屬性的使用詳解

          Audio對象屬性: volume 描述:設(shè)置或返回音頻的音量,取值范圍(0——1)

          下面是我做的音樂播放器如何調(diào)節(jié)音頻音量的代碼:

          //增加切換音量事件  (function(){      var height = $("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar").height();      $("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar .scroll-btn").on("mousedown",function(e){          e.preventDefault();          var downHeight = $("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar").height();          var downY = e.clientY;          document.onmousemove = function(e){              e.preventDefault();              var moveY = e.clientY;              var nowHeight = downY-moveY+downHeight;              if(nowHeight<=0){                  nowHeight =0;              }else if(nowHeight >= height){                  nowHeight = height;              }              $("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar").height(nowHeight);              var precent = nowHeight/height;              audio.volume = precent;          }             document.onmouseup = function(){              document.onmousemove = null;              document.onmouseup = null;          }      });  })();

          上面的主要思路:聲明height變量先獲取調(diào)節(jié)音量的滑動(dòng)條的高度(設(shè)置的是80px),

          給滑動(dòng)條上的滑動(dòng)塊綁定mousedown事件,取消其默認(rèn)事件e.preventDefault();

          聲明downHeight獲取未滑動(dòng)時(shí)的音量滑動(dòng)條的高度, 聲明downY獲取點(diǎn)擊位置距離窗口上方的y(垂直)方向距離var downY = e.clientY;

          給整個(gè)dom添加mousemove事件,取消其默認(rèn)事件e.preventDefault();

          聲明moveY獲取光標(biāo)移動(dòng)到的位置距離窗口上方的y(垂直)方向距離var moveY = e.clientY;

          聲明nowHeight獲取調(diào)節(jié)后音量滑動(dòng)條的高度var nowHeight = downY-moveY+downHeight;

          因?yàn)榛瑒?dòng)條的高度為80px,所以在下面判斷了一下

          if(nowHeight <=0){  nowHeight=0;//最小值為0(對應(yīng)volume靜音)  }else if(nowHeight>=height){  nowHeight=height;//最大值為80px(對應(yīng)volume最大值1)  }

          將調(diào)節(jié)后的音量條高度賦值給滑動(dòng)條,實(shí)現(xiàn)調(diào)節(jié)時(shí)滑動(dòng)條同步變換高度;

          由于音量vojume的取值范圍(0-1),讓nowHeight/height 得到調(diào)節(jié)后高度對總體高度的百分比,值為(0-1)

          最后將這個(gè)值賦予audio.volume=nowHeight/height;

          當(dāng)調(diào)節(jié)結(jié)束后,松開鼠標(biāo)添加mouseup事件,將mousemove和mouseup事件都清空

          贊(0)
          分享到: 更多 (0)
          網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)