HTML5中Audio对象volume属性的应用
来源:互联网 发布:淘宝网机械水压开关 编辑:程序博客网 时间:2024/06/05 22:00
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中Audio对象volume属性的应用
- HTML5中Audio标签ended属性的使用
- HTML5的audio元素应用
- 【Audio】Audio对象的方法和属性
- html5中audio属性和方法
- HTML5中audio元素属性详解
- HTML5中meta属性的应用
- HTML5中meta属性的应用
- HTML5之音频Audio标签的应用
- html5中audio的详细使用
- HTML5中 audio标签的样式修改
- HTML5中 audio标签的样式修改
- html5中audio的详细使用
- audio的应用和常见属性
- Audio 对象属性
- html5中表格的各种属性以及应用详细介绍
- HTML5--margin属性的应用
- HTML5 的 Audio 标签
- centos 安装mysql 5.7
- 大数据量高并发的数据库优化
- Android—高级控件(三)下拉刷新
- [leetCode刷题笔记]371. Sum of Two Integers
- FreeBSD 10.3 上的构建独立版本SVN服务器
- HTML5中Audio对象volume属性的应用
- Chrome dev tool issue
- HTML用到的小标签
- docker run的--rm选项详解
- minmax()函数
- (一) Spring Boot学习笔记之第一个Spring Boot程序HelloWorld
- 网络编程实验3-并发多线程服务器设计
- Spring Boot项目利用Redis实现session管理
- android动态加载资源