HTML5中volume样式自定义,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事件都清空

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/532177.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab中如何调用gpu进行并行计算_极致安卓-Termux/Aid learning开启WebGL手机GPU并行计算...

在我的之前的测评中&#xff0c;我利用Termux和Aid Learning测试过基于C/C的openmp并行程序&#xff0c;基于Java的并行程序&#xff0c;还有基于MPI以及基于Java的分布式集群并行。但是很遗憾&#xff0c;一直无法成功开发基于OpenCL的GPU并行编程。这是主要是因为Android并没…

python默认编码方式_关于设置python默认编码方式的问题

2019-8-27 07:45:36 本帖最后由 傻纸 于 2019-8-27 10:02 编辑 查了一会资料得出的结论是如果你用的是python3.x&#xff0c;那么就最好别去设置sys.defaultencoding或者sys.stdout.encoding 记住在需要编码的时候用encode&#xff0c;解码的时候decode就可以了。。。 这个问题…

计算机科学与技术是属于什么学科,计算机科学与技术专业属于什么大类 属于哪个学科...

近日&#xff0c;有很多人咨询小编计算机科学与技术专业属于什么大类 属于哪个学科&#xff1f;现在小编统一回复一下大家计算机科学与技术专业属于工学类&#xff0c;下面是关于计算机科学与技术专业详细的介绍。1计算机科学与技术专业门类及学科介绍专业名称专业代码门类学科…

matlab imread_MATLAB图像处理:29:在几何变换输出中指定填充值

本示例说明如何指定imwarp执行几何变换时使用的填充值。执行转换时&#xff0c;输出图像中通常会有一些像素不属于原始输入图像。必须为这些像素分配一些值&#xff0c;称为填充值。默认情况下&#xff0c;imwarp将这些像素设置为零&#xff0c;并显示为黑色。使用FillValues参…

小学生学计算机,学计算机对小学生的好处

内容提要:随着计算机应用的日益社会化和家庭化,计算机在人们工作、学习和生活等各个方面正发挥着越来越重要的作用&#xff0c;而计算机应用基础也相应成为现代社会人们必修的文化基础课。现在的小学生将是未来的创新型人才&#xff0c;他们的计算机水平如何&#xff0c;直接关…

micopython 18b20_MicroPython控制8*8LED点阵显示温度

MicroPython顾名思义就是可以在单片机上跑的Python&#xff0c;借助Micro Python&#xff0c;用户完全可以通过Python脚本语言实现硬件底层的访问和控制&#xff0c;比如说控制LED灯泡、LCD显示器、读取电压、控制电机、访问SD卡等。目前支持MicroPython的开发板有好几种&#…

计算机组装维护文献,组装计算机论文,关于《计算机组装维护》课程教学相关参考文献资料-免费论文范文...

导读:此文是一篇组装计算机论文范文,为你的毕业论文写作提供有价值的参考。【摘 要】计算机硬件知识的教与学对于计算机相关专业的学生来说,重要性是不言而喻的.由于教学资源缺乏,面对这门以操作性强为特点的课程,如何利用学校有限的条件培养出符合职业资格标准的学生是该专业教…

ip变更会影响账号登陆吗_【教程】PUBG账号被盗导致封禁申诉解封教程

很多朋友询问PUBG在被盗号后被盗号者开挂导致永封该如何申诉解封&#xff0c;现在结合一些玩家被盗号及成功申诉的经历&#xff0c;详列一下步骤。本方法只适用于被盗后开挂导致封禁的账号&#xff0c;那些自己开挂被封的孤儿不用往下看了。一.先向steam客服申诉 找回自己的ste…

html5专著,参考文献专著

参考文献类型&#xff1a;专著[M]&#xff0c;会议论文集[C]&#xff0c;报纸文章[N]&#xff0c;期刊文章[J]&#xff0c; 学位论文[D]&#xff0c; 报告[R]&#xff0c; 标准[S]&#xff0c; 专利[P]&#xff0c;论文集中的析出文献[A]关于你又知道多少呢?下面是小编为大家整…

滤镜怎么调_手机、电脑怎么剪辑视频?真心求推荐实用工具

自从加入了短视频自媒体运营这个行业以后&#xff0c;我就开始接触到各种各样的手机、电脑视频剪辑、制作软件&#xff0c;用它们来处理、完成被安排到的工作任务。很多时候&#xff0c;我也用它们来剪视频&#xff0c;借此来练练手、积累下素材。记得刚进入这个行业的时候&…

2021计算机基础知识题库,2021~2021计算机基础知识练习题

2021~2021计算机基础知识练习题 2021~2021计算机基础知识练习题 北京联合大学 2021~2021计算机基础知识练习题 一、选择题 1.记录在存储介质上的一组相关信息的集合称为______。 A)程序 B)磁盘 C)软件 D)文件 2.当一个文件更名后&#xff0c;文件的内容会______。 A)完全消失 B…

计算机背板知识,你知道背板的选购技巧吗?

原标题&#xff1a;你知道背板的选购技巧吗&#xff1f;背板就是母板&#xff0c;子板插在上面构成系统&#xff0c;计算机背板说成背板也成立&#xff0c;只不过背板更多的知识线路板而已&#xff0c;没有实际的器件&#xff0c;只起信号通路作用。背板在设备机箱的后面。一般…

git 切换分支_git 入门教程之分支总览

分支就是一条独立的时间线,既有分支,必有主干,正如一棵树谈到树枝,必有树干一样的道理.我们先前对git 的全部操作默认都是在主干上进行的,这个主干也是一种特殊的分支,名为 master 分支.无论是穿越历史还是撤销更改,我们都或多或少接触过时间线,git 管理的版本串在一起就组成了…

计算机应用技术专业全国排名,计算机应用技术专业全国排名

排名学校名称等级排名学校名称等级排名学校名称等级1清华大学A19武汉大学A37合肥工业大学A2浙江大学A20华南理工大学A38苏州大学A3北京航空航天大学A21电子科技大学A39江苏大学A4华中科技大学A22大连理工大学A40大连海事大学A5北京大学A23天津大学A41中山大学A6上海交通大学A24…

python中加减乘除是什么数据类型_python中,数字类型计算

说明&#xff1a; 今天在看python数字类型的操作&#xff0c;在此记录下。 操作过程&#xff1a; 1.数字的加减乘除 >>> 2 2 4 >>> 4 - 2 2 >>> 2 - 4 -2 >>> 2 * 2 4 >>> 2 / 2 #除法的结果会返回小数的结果&#xff0c;如果是…

正在锁定计算机 win7转圈圈打不开,Win7网络连接图标一直转圈的原因和解决方法...

Win7网络连接图标一直转圈是什么情况&#xff1f;如果用户发现Win7系统中的网络图标一直处在转圈状态&#xff0c;则表示该网络不能正常加载&#xff0c;且无法识别&#xff0c;笔者通过检查发现网络依赖的服务Network List Service没有自动启动&#xff0c;启动之后可解决该问…

jvm内存模型和java内存模型_JVM运行时内存模型综述

JVM内存模型JVM分为五个区域&#xff1a;虚拟机栈、本地方法栈、方法区、堆、程序计数器。JVM不同区域的占用内存大小不同&#xff0c;一般情况下堆最大&#xff0c;程序计数器较小。JVM五个区中虚拟机栈、本地方法栈、程序计数器为线程私有&#xff0c;方法区和堆为线程共享区…

python数独游戏源代码100行_python实现自动解数独小程序

跟朋友最近聊起来数独游戏&#xff0c;突发奇想使用python编写一个自动计算数独解的小程序。 数独的规则不再过多阐述&#xff0c;在此描述一下程序的主要思路&#xff1a; &#xff08;当前程序只针对于简单的数独&#xff0c;更复杂的还待深入挖掘&#xff09; 1.计算当前每个…

getline没有与参数列表匹配的重载函数_C++新增基础功能解析—函数重载功能的使用...

喜欢的可以收藏转发加关注“函数重载”指的是可以有多个同名的函数&#xff0c;因此 名称进行了重载。这两个术语指的是同一回事&#xff0c;但我们通常使用函数重载。可以通过函数重载来设计• 系列函数——它们完成相同的工作&#xff0c;但使用不同的参数列表。重载函数就像…