如何让音乐播放控制条在js中实现

一个新手 原创: 2017-09-09 09:25:27 1337浏览

前言

html5中提供audio标签, 该标签实现音频的播放，之前就一直对于音频以及视频播放比较感兴趣，一直想要自己实现一个音频和视频播放的模块，这也是本文章撰写的初衷，最近花了些时间实现了Audio播放控制条，从这个小的模块实现也学习到了以前没有接触到的知识。

Audio实现思路

浏览器原生提供的audio的样式比较简单而且不是太好看，原生提供的样式如下：
原生控制条

自实现的音乐播放控制条, 效果如下：
自实现音乐播放控制条

该音乐播放控制条实现的功能如下：

音乐播放（最基本的）
多首音乐的手动切换以及自动切换实现循环播放
进度条点击播放进度的改变
进度条拖动播放进度的改变
音量点击改变
音量拖动改变

具体的实现效果：

下面就具体功能的实现具体展开，实现的音乐播放控制进度条主要是学习使用，没有考虑兼容性，下面主要讲解每个功能的实现思路：

整体

整个音乐播放的控制底层还是采用浏览器audio标签来实现，调用audio api来实现整体的功能，下面是当前控制条的html结构：

<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：是控制播放以及切换歌曲的区域
audio-bar：是时间以及歌曲进度的区域
audio-volume：是音量调节的区域

播放区域

该区域实现音乐的播放、暂停、切换（上一首、下一首）,这部分其实没有什么需要讲解的，实际上就是audio api中play()、pause()来实现播放与暂停的，歌曲的切换就是数组元素的改变，修改src地址而已。

进度区域

该区域是整个模块中核心的部分，该区域主要的功能点是：

进度效果实现
滑动效果实现

首先进度实现，思路是：

进度条有两个p构成：

// 最外层作为进度条暗的长度区域<p>    // 最内层是实际表示进度
    <p></p>
</p>

进度条

当点击进度条，获取鼠标点击该点的相对于最近的父类元素的x轴方向的偏移量
偏移量就是内层p的实际宽度，设置背景色
滑块的位置是设置left的值，但是left的值是：偏移量-滑块宽度/2

滑动的实现，在该模块编写中没有采用html5中的拖放api，而是采用mousedown、mousemove、mouseup来实现的，具体实现代码：

    // 滑动效果
    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;
        }
    });

简单来说就是：