JavaScript实现音频进度条

2022.7.13 更新，写在前面的前面：本文最初写于2017年，是当年做作业时的记录，2020年重新发布过一次。但是中途有一次csdn文章结构改版，html代码遗失了，看剩下的代码回忆一下，html结构应该是这样的：最外层是一个类名为Process的div，里面是三个div，分别是：一个类名为ProcessAll、id为processall的div，一个类名为ProcessNow、id为processnow的div，一个类名为SongTime、id为songtime的div。仅供参考。

前言：刚学着使用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;
		}

     //以下提到的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为对象的id
		var 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;这两种代码都可以将当前音频时间设置为起始位置。