JavaScript implementation of audio progress bar

I just learned to use HTML5 and CSS and JavaScript to do something like emmmm, but because I am only at the level of rapid development, I still encounter many problems, so I decided to record the usage that is difficult to find or understand on the network, and leave it for future reference, hoping to give a little reference to people who encounter the same problem.


This blog mainly talks about how to use JS to realize audio's self-made simple progress bar, as well as the change of play jump and play time. The reason is that I don't think the controls provided by the browser (I use Firefox) are quite in line with my page style.

It's like this in Firefox:

After my own work, it's like this:



In fact, the idea of progress bar is very simple. First, there should be a total length, and then place a thing with the same color and width at the same starting position of the total length (for example, here are two slender rectangles). Then when playing audio, use setInterval function, which can call the function or calculation table according to the specified period (in milliseconds) Da formula, every second (or less, of course, if this is not a second, then the calculation should also remember to change) increase the length of the progress bar a little in proportion, so that the simple progress bar is completed from 0 at the beginning to the total length at the end.

About setInterval method Reference here


In order to achieve mouse click progress bar can change the audio playback, we need to know the mouse coordinates. The general idea is to obtain the mouse coordinates only when the mouse clicks on the div area of the progress bar. Therefore, the obtained x coordinate minus the starting x coordinate of the progress bar specified in CSS (the leftmost part of the progress bar) is the length of the distance between the mouse click position and the beginning of the progress bar. This length is divided by the total length of the progress bar and multiplied by the total length of audio. This result is the mouse click That position corresponds to the progress of the audio that should be played, and then use the fastSeek function of the audio to jump to that time.


When looking for information, I refer to the following links, but because I am a beginner of JS, I am dizzy with various variables of some advanced usage of emm, especially with. So I can't understand = =, some of them can't understand and run successfully in their own code = =, but these give me a lot of inspiration, thanks to the original blogger ("'▽'") Click to open the link


The following will list the relevant CSS & HTML & JS code. The location and color can be determined at will. The use of JS is only for reference. In some places, the call is very verbose in order to understand clearly.

			position: relative;
			padding: 100px;
		    margin-top: 15px;
		    width: 500px;
		    float: left;
		    height: 3px;
		    cursor: pointer;
		    width: 0px;
		    float: left;
		    position: relative;
		    height: 3px;
		    cursor: pointer;
		    float: right;
		    font-family: cursive,microsoft Yahei;
		    font-size: 14px;
     //The aud mentioned below is an audio object
    //You can get it through document.getElementById("audio ID")
    function TimeSpan() {//Call this function during audio playback
        setInterval("process()", 1000);
    //Progress bar main function
    function process(){
    		var Process_Now=(aud.currentTime/aud.Now)+"px";//Convert process "now to an integer and add a px unit to it
            document.getElementById("processnow").style.width=widthchange;//Change the width of the progress bar
            var current_Time = timeFormat(aud.currentTime);//Get the played time of the audio and convert it to mm:ss format
            var time_All = timeFormat(aud.duration);//Get the total time of the audio and convert it to mm:ss format
            document.getElementById("songtime").innerHTML=current_Time+" | "+time_All;//Display time in the form of "played time | total time"
    //Convert time in seconds to 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 coordinate of mouse
    var mousey;//y coordinate of mouse
    //In fact, you only need to know the x coordinate of the mouse in this program. See the following for details~
    function changeProcess(){
    	// *****Get the abscissa of the mouse
    	// *****Get the start and end coordinates of div id=processall
		//Get the abscissa value of the object relative to the page; id is the id of the object
		var thisX = document.getElementById("processall").offsetLeft;
		//Obtain the abscissa value of the object relative to the page;
		var thisY = document.getElementById("processall").offsetTop;
		//Get the scrolling distance of the page;
    	//Note: document.documentElement.scrollTop supports non Google kernel; document.body.scrollTop supports Google kernel
		var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;
		//The unique method of obtaining event in Firefox==
		e=arguments.callee.caller.arguments[0] || window.event; 
		//Get the horizontal value of positioning relative to the object = the abscissa value of the current relative page of the mouse - the abscissa value of the object;
		mousex=e.clientX - thisX;
		//Get the ordinate value of positioning relative to the object = the ordinate value of the current relative page of the mouse - the ordinate value of the object + the height of the scroll bar;
		mousey=e.clientY - thisY+this;
    	// *****Set the current playback as the mouse position
    	var place = (mousex-100)/document.getElementById("processall").offsetWidth*aud.duration;
    	//Note: the mousex-100 position on the previous line indicates the length of the mouse relative to the start of the progress bar
    	aud.fastSeek(place);//Set the playback time to the time represented by the mouse's progress bar position


The reason why the code mentions that it only needs to obtain the x coordinate of the mouse is that the progress bar realized here is very simple, just horizontal extension, so it can only be calculated in the x direction. Similarly, if it is a vertical progress bar, it should only need the y coordinate, if it is a circular progress bar, it may need all.

If you think about it for a while, write it first, and then add la.


Update on October 21, 2017: the fastseek function in the above code may not be easy to use in chrome and IE, so it can be changed to Au. Currenttime = 0. That is, set the current time of the audio object to a number of seconds.

currentTime also works in Firefox.

For example: aud.faseSeek(0); and aud.currentTime=0; both codes can set the current audio time to the starting position.


Published 2 original articles, won praise 5, visited 10000+
Private letter follow

Tags: Firefox Google html5 Javascript

Posted on Wed, 15 Jan 2020 00:57:42 -0500 by nofxsapunk