html5中关于volume属性的使用详解
导读:收集整理的这篇文章主要介绍了html5中关于volume属性的使用详解,觉得挺不错的,现在分享给大家,也给大家做个参考。Audio对象属性: volume 描述:设置或返回音频的音量,取值范围(0——1)下面是我做的音乐播放器如何调节音频音...
收集整理的这篇文章主要介绍了html5中关于volume属性的使用详解,觉得挺不错的,现在分享给大家,也给大家做个参考。Audio对象属性: volume 描述:设置或返回音频的音量,取值范围(0——1)下面是我做的音乐播放器如何调节音频音量的代码:
//增加切换音量事件(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变量先获取调节音量的滑动条的高度(设置的是80px),
给滑动条上的滑动块绑定mousedown事件,取消其默认事件e.preventDefault();
声明downHeight获取未滑动时的音量滑动条的高度, 声明downY获取点击位置距离窗口上方的y(垂直)方向距离var downY = e.clientY;
给整个dom添加mousemove事件,取消其默认事件e.preventDefault();
声明moveY获取光标移动到的位置距离窗口上方的y(垂直)方向距离var moveY = e.clientY;
声明nowHeight获取调节后音量滑动条的高度var nowHeight = downY-moveY+downHeight;
因为滑动条的高度为80px,所以在下面判断了一下
if(nowHeight =0){ nowHeight=0; //最小值为0(对应volume静音)} else if(nowHeight> =height){ nowHeight=height; //最大值为80px(对应volume最大值1)}
将调节后的音量条高度赋值给滑动条,实现调节时滑动条同步变换高度;
由于音量vojume的取值范围(0-1),让nowHeight/height 得到调节后高度对总体高度的百分比,值为(0-1)
最后将这个值赋予audio.volume=nowHeight/height;
当调节结束后,松开鼠标添加mouseup事件,将mousemove和mouseup事件都清空
以上就是htML5中关于volume属性的使用详解的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html5中关于volume属性的使用详解
本文地址: https://pptw.com/jishu/583523.html