JavaScript实现音频控制进度条

前言：刚学着使用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实现音频控制进度条 的详细内容。更多信息请关注PHP中文网其他相关文章！