JavaScript实现音频控制进度条

  • A+
所属分类:js教程
摘要

这一篇博客主要说的是用JS实现audio的自制简单进度条以及鼠标点击进度条控制播放的跳转和播放时间的改变——尝试自己改变浏览器默认的audio标签的controls样式修改之进度条篇

前言:刚学着使用HTML5和CSS和JavaScript做点东西比如作业emmmm但由于自己仅仅是速成的水平所以还是遇到了不少问题,所以决定把网络上比较难搜到或者难理解的用法记录下来,留做以后参考,也希望能给遇到相同问题的人一点点参考哈。

这一篇博客主要说的是用JS实现audio的自制简单进度条以及播放的跳转和播放时间的改变。起因是我感觉浏览器(我用的是火狐)自带的controls控件不太符合我的页面风格嗯。

火狐里它是这样的:

JavaScript实现音频控制进度条

我自己的做完后是这样的:

JavaScript实现音频控制进度条 JavaScript实现音频控制进度条

其实进度条的思路很简单,首先要有一个总长度,然后在总长的相同起始位置放置一个除了颜色和宽度(width)其他都相同的东西(比如,我这里就是两个细长的矩形),然后当音频播放时,使用setInterval函数,它可按照指定的周期(以毫秒计)来调用函数或计算表达式,每隔一秒(或者更小,当然如果此处不是一秒,之后的计算也要记得改变)按照比例增加一点进度条的长度,这样从开始时的0到结束时的总长,简易的进度条就完成了。

关于setInterval方法可以参照这里

为了实现鼠标点击进度条可以改变音频播放,需要知道鼠标的坐标。大致思路是仅仅在鼠标在进度条的p区域上click时才获取鼠标的坐标,因此获得的x坐标减去CSS中规定的进度条的起始x坐标(进度条的最左边)就是鼠标点击位置距离进度条开头的长度了,这个长度除以进度条的总长度再乘以audio的总时长,这个结果就是鼠标点击的那个位置对应的音频应该播放的进度,然后使用音频的fastSeek函数跳转到该时间上就可以了。

下面将列出相关的CSS&HTML&JS代码,其中的位置和颜色可以随意定,对JS的使用仅供参考,有些地方为了理解的清楚其实调用的很啰嗦嗯。

代码里提到的其实只要获取鼠标的x坐标就可以了是因为:这里实现的进度条很简单,只是横向的伸长,所以只在x方向上计算就可以了,同理如果是竖向的进度条应该只需要y坐标就可以,如果是圆形的进度条可能就要都需要了吧。

以上就是JavaScript实现音频控制进度条 的详细内容,更多请关注php教程其它相关文章!

除非注明,否则均为@蒲公英网原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.aipgy.com/344329.html

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: