当前位置:Gxlcms > JavaScript > JavaScript实现音频控制进度条

JavaScript实现音频控制进度条

时间:2021-07-01 10:21:17 帮助过:8人阅读

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

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

火狐里它是这样的:

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


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

关于setInterval方法可以参照这里

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

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

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

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

人气教程排行