How to implement music playback control bar in js

Preface

html5 provides the audio tag, which implements audio playback. I have always been interested in audio and video playback, and have always wanted to implement one myself. The audio and video playback module is also the original intention of writing this article. I recently spent some time implementing the Audio playback control bar. From the implementation of this small module, I also learned knowledge that I had not been exposed to before.

Audio implementation ideas

The audio style provided natively by the browser is relatively simple and not very good-looking. The natively provided styles are as follows:

Self-implementation The music playback control bar has the following effect:

The music playback control bar implements the following functions:

• Music playback (the most basic)

• Manual switching and automatic switching of multiple music to achieve loop playback

• Click on the progress bar to change the playback progress

• Drag the progress bar to change the playback progress

• Click to change the volume

• Drag the volume to change

Specific implementation effects:

The implementation of specific functions will be detailed below. The music playback control progress bar implemented is mainly for learning and use, without considering compatibility. The following mainly explains each The implementation idea of ​​each function:

Overall

The bottom layer of control of the entire music playback is still implemented using the browser audio tag, and the audio api is called to realize the overall function. The following is the html of the current control bar Structure:

<p class="audio">
    <audio></audio>
    <p class="audio-controller">
        <span class="audio-prev"></span>
        <span class="audio-state"></span>
        <span class="audio-next"></span>
     </p>
     <p class="audio-bar">
        <span class="audio-time-current"></span>
        <p class="audio-progress">
            <p>
                <p></p>
                <p></p>
                </p>
            </p>
        <span class="audio-time-duration"></span>
     </p>
     <p class="audio-volume">
        <span class="audio-volume-icon"></span>
        <p class="audio-volume-adjust">
            <p>
                <p></p>
                <p></p>
            </p>
        </p>
     </p></p>

audio-controller: It is the area that controls playback and switching songs
Audio-bar: It is the area for time and song progress
audio-volume: It is the volume adjustment area

Playback area

This area implements music playback, pause, and switching (previous song, next song), this part actually does not What needs to be explained is actually play() and pause() in the audio api to realize play and pause. Switching between songs is just changing the array elements and modifying the src address.

Progress area

This area is the core part of the entire module. The main functional points of this area are:

• Progress effect implementation

• Sliding effect implementation

First of all, the progress is realized. The idea is:

• The progress bar has two Each p consists of:

// 最外层作为How to implement music playback control bar in js暗的长度区域<p>    // 最内层是实际表示进度
    <p></p>
</p>

• When the progress bar is clicked, the relative position of the mouse click on the point is obtained. The offset in the x-axis direction of the nearest parent element

• The offset is the actual width of the inner p, set the background color

• The position of the slider is to set the value of left, but the value of left is: offset - slider width/2

The implementation of sliding is written in this module The drag-and-drop API in HTML5 is not used, but mousedown, mousemove, and mouseup are used to implement it. The specific implementation code:

    // 滑动How to implement music playback control bar in js
    bar.addEventListener('mousedown', function(e) {
        e.stopPropagation();        // 获取滑块被选择时相对文档的初始X轴值
        options.clientX = e.clientX;        // 偏移量
        options.left = this.offsetLeft;
        options.max = bgNode.offsetWidth - this.offsetWidth / 2;
        options.isDrag = true;
    });
    document.addEventListener('mousemove', function(e) {
        e.stopPropagation();        if (options.isDrag) {            let currentClientX = e.clientX,
                left = options.left,
                max = options.max,
                initClientX = options.clientX,
                barHalfWidth = bar.offsetWidth / 2,
                fgWidth = 0,                // 设置要滑动到的位置点(x轴方向偏移量)
                to = Math.max(0, Math.min(max, left + (currentClientX - initClientX)));

            bar.style.left = to + 'px';            if (to > barHalfWidth) {
                fgWidth = to + barHalfWidth;
            }
            fgNode.style.width = Math.max(0, fgWidth) + 'px';
            options.offsetX = Math.max(0, fgWidth);
        }
    });

    bgNode.parentNode.addEventListener('mouseup', function(e) {
        e.stopPropagation();        if (options.isDrag) {            // 绘制此时的进度
            tools.timeUpdateOrVolumeUpdate(options.offsetX, type);
            options.isDrag = false;
        }
    });

Simply put:

Get when mousemove The current X-axis position of the mouse in the document - initial position + initial offset of the element, dynamically changing the value of left to achieve

The progress is actually displayed by the width of p, dynamically Change the value of width and the left value of the slider to achieve the progress effect

What needs to be noted here is:

• The difference between the total width of the current progress bar and the total audio time Proportional relationship, so as to calculate the length of the progress corresponding to different audio time points, this is the basis

In fact, this is also very easy to calculate:

Proportion: width /duration
Specify the width of the time: (width / duration) * currentTime

The implementation of volume adjustment is similar to the progress, mainly changing the implementation of volume.

Let’s talk about the problems in this module:

• The slider effect is sometimes not natural and smooth enough

• Audio files The processing of time is not good enough

• The progress part was not very good at the beginning

The code will be uploaded to my Github, and this module will need to be worked on in the future Improve.

The above is the detailed content of How to implement music playback control bar in js. For more information, please follow other related articles on the PHP Chinese website!