亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(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é)音量的滑動條的高度(設(shè)置的是80px),

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

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

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

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

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

    因為滑動條的高度為80px,所以在下面判斷了一下

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

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

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

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

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

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