JavaScript实现音频进度条

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

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

火狐里它是这样的：

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

       

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

关于setInterval方法可以参照这里

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

查找资料时，我参照了以下的链接，但由于是初学JS，对一些高级用法emm尤其是带.的各种变量很晕，所以没能看懂==，有的看懂了也没能在自己的代码里运行成功==，但这些给了我很多启发，感谢原博作者(〃'▽'〃)点击打开链接

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

div.Process{position: relative;left:100px;padding: 100px;    margin-top: 15px;}div.ProcessAll{    width: 500px;    float: left;    height: 3px;    cursor: pointer;    background-color:rgba(161,61,99,0.5);   }div.ProcessNow{    width: 0px;    float: left;    position: relative;    left:-500px;    height: 3px;    cursor: pointer;    background-color:#F7A278;   }div.SongTime{    float: right;    font-family: cursive,microsoft Yahei;    font-size: 14px;    color:#ee8a87;}
 
 
 
00:00 | 00:00
 
     //以下提到的aud是音频对象    //可以通过document.getElementById("音频的ID")来获得    function TimeSpan() {//在音频播放时调用这个函数        setInterval("process()", 1000);    }      //进度条主函数    function process(){    var Process_Now=(aud.currentTime/aud.Now)+"px";//将Process_Now转换为整数并给它加一个px单位            document.getElementById("processnow").style.width=widthchange;//改变进度条的width            var current_Time = timeFormat(aud.currentTime);//获取音频的已经播放的时间并将它转换成mm:ss的格式            var time_All = timeFormat(aud.duration);//获取音频的总时间并将它转换成mm:ss的格式            document.getElementById("songtime").innerHTML=current_Time+" | "+time_All;//将时间显示为“已播放时间 | 总时长”的形式    }    //将单位为秒的的时间转换成mm:ss的形式    function timeFormat(number) {        var minute = parseInt(number / 60);        var second = parseInt(number % 60);        minute = minute >= 10 ? minute : "0" + minute;        second = second >= 10 ? second : "0" + second;        return minute + ":" + second;    }         var mousex;//鼠标的x坐标    var mousey;//鼠标的y坐标    //其实在这个程序里只需要知道鼠标的x坐标就可以了，详见后文~        function changeProcess(){    // *****获取鼠标的横坐标    // *****获取div id=processall的起始坐标和终止坐标//获得对象相对于页面的横坐标值；id为对象的idvar thisX = document.getElementById("processall").offsetLeft;//获得对象相对于页面的横坐标值；var thisY = document.getElementById("processall").offsetTop;//获得页面滚动的距离；    //注：document.documentElement.scrollTop为支持非谷歌内核；document.body.scrollTop为谷歌内核var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;//火狐浏览器的独特获取event方法==e=arguments.callee.caller.arguments[0] || window.event; //获得相对于对象定位的横标值 = 鼠标当前相对页面的横坐标值 - 对象横坐标值；mousex=e.clientX - thisX;//获得相对于对象定位的纵标值 = 鼠标当前相对页面的纵坐标值 - 对象纵坐标值 + 滚动条滚动的高度；mousey=e.clientY - thisY+this;        // *****将当前播放置为鼠标的位置    var place = (mousex-100)/document.getElementById("processall").offsetWidth*aud.duration;    //注意：上一行的mousex-100的位置表示鼠标相对进度条起始位置的长度    aud.fastSeek(place);//将播放时间设置为鼠标所在的进度条位置上代表的时间    }

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

暂时想到了这些就先写这些，如果还有就再补充la。

2017.10.21更新：以上代码里出现fastseek函数在chrome和IE里未必好用，相应地可以改为aud.currentTime=0。也即，将音频对象的当前时间设置为一个秒为单位的数。

currentTime在火狐里也适用。

例如：aud.faseSeek(0);与aud.currentTime=0;这两种代码都可以将当前音频时间设置为起始位置。