JavaScript implements audio control progress bar

Foreword: I just learned to use HTML5, CSS and JavaScript to do some things, such as homework emmmm, but since I am only at the quick-speed level, I still encountered a lot of problems, so I decided to use the Internet to find and understand the usages that are difficult to find or understand. Record it and keep it for future reference. I also hope it can be a reference for people who encounter the same problem.

This blog mainly talks about using JS to implement audio’s self-made simple progress bar, playback jump and playback time change. The reason is that I feel that the built-in controls of the browser (I am using Firefox) do not fit the style of my page.

It looks like this in Firefox:

After I finished it, it looks like this:

In fact, the idea of ​​​​the progress bar is very simple. First, there must be a total length, and then place something that is the same except for color and width (width) at the same starting position of the total length (for example, I Here are two slender rectangles), and then when the audio is playing, use the setInterval function, which can call the function or calculate the expression according to the specified period (in milliseconds), every second (or less, of course if This is not one second, remember to change it in subsequent calculations) Increase the length of the progress bar a little proportionally, so that from 0 at the beginning to the total length at the end, the simple progress bar is completed.

For the setInterval method, please refer here

In order to change the audio playback by clicking the mouse on the progress bar, you need to know the coordinates of the mouse. The general idea is to only obtain the coordinates of the mouse when the mouse clicks on the p area of ​​the progress bar. Therefore, the obtained x coordinate minus the starting x coordinate of the progress bar specified in CSS (the leftmost side of the progress bar) is the mouse click position. The length from the beginning of the progress bar. This length is divided by the total length of the progress bar and multiplied by the total duration of the audio. This result is the progress of the audio that should be played corresponding to the position clicked by the mouse. Then use the fastSeek function of audio Just jump to that time.

The relevant CSS&HTML&JS code will be listed below. The position and color can be determined at will. The use of JS is for reference only. In some places, the call is very verbose for clear understanding.

The reason mentioned in the code is that you only need to get the x coordinate of the mouse because: the progress bar implemented here is very simple, it just extends horizontally, so it only needs to be calculated in the x direction. At the same time, Logically speaking, if it is a vertical progress bar, you should only need the y coordinate. If it is a circular progress bar, you may need both.

The above is the detailed content of JavaScript implements audio control progress bar. For more information, please follow other related articles on the PHP Chinese website!