JavaScript实现音频进度条

     //以下提到的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);//将播放时间设置为鼠标所在的进度条位置上代表的时间
    }