Vue | 原生audio样式不好看，自己写一个简易的音乐播放控件，实现播放暂停可拖动

最近遇到一个需求，需要写一个简单的音频控件：往控件传入音频url实现播放、暂停、允许拖动、显示时间等功能，由于原生audio标签样式不太好看，所以决定自己写一个。效果如下：

思路

把这个需求分成几个部分：左边的播放暂停按钮、右边上面的文字显示、下面的进度条。

可以把audio作为原始控件（但不在页面中显示），用自己写的控件来控制audio标签的行为动作。

1.暂停、播放按钮控制audio的play()与pause()。

2.进度条，这里可以用range来实现，修改range的样式来达到上图的效果，通过onInput和onChange来监控range拖动的变化，进而控制audio的变化（播放到指定位置）。

3.文件名字样以及右边的时间显示可以通过audio标签的duration和currentTime属性来控制。

实现

vue项目中使用了fontawesome图表库，可以根据实际自己替换。

html

html结构分为左边的图标跟右边的文字跟range控件，基本结构也比较简单。

html中必须有一个audio标签，将这个标签隐藏即可，然后用过自己写的控件来控制audio。

<audio style="display: none" controls></audio>

CSS

这里主要是对range控件的样式设置，通过input[type="range"]控制进度条的样式，通过input[type='range']::-webkit-slider-thumb控制滑块的样式。

input[type='range'] {
   
   
    outline: none;
    -webkit-appearance: none; /*清除系统默认样式*/
    width: 100% !important;
    background: -webkit-linear-gradient(#10a9ff, #10a9ff) no-repeat, #dddddd; /*背景颜色，俩个颜色分别对应上下*/
    background-size: 0% 100%; /*设置左右宽度比例，这里可以设置为拖动条属性*/
    height: 2px; /*横条的高度，细的真的比较好看嗯*/
}
/*拖动块的样式*/
input[type='range']::-webkit-slider-thumb {
   
   
    -webkit-appearance: none; /*清除系统默认样式*/
    height: 10px; /*拖动块高度*/
    width: 3px; /*拖动块宽度*/
    background: #10a9ff; /*拖动块背景*/
}

逻辑

大体思路是：由两个icon和range控制audio，由audio控制文字的显示。

1.播放暂停图标控制audio标签播放。

audio元素有pause()和play()控制音频的暂停和播放。因此，可以对icon绑定事件控制audio的播放暂停。

<span class="icon" v-if="isPlay == false" @click="play">
    <i class="fa fa-play play-icon" aria-hidden="true"></i>
</span>
<span class="icon" v-if="isPlay == true" @click="pause">
    <i class="fa fa-pause pause-icon" aria-hidden="true"></i>
</span>

// 控制音乐播放
play() {
   
   
    const audio = this.$refs.audio;
    audio.play();
    this.isPlay = true;
},
// 控制音乐暂停
pause() {
   
   
    const audio = this.$refs.audio;
    audio.pause();
    this.isPlay = false;
}

isPlay用来控制显示哪一个icon。

2.rang控制audio元素的时间进度（range拖动的时候）。

rang实际上是一个input标签，因此有onChange和onInput两个回调事件监控range相关参数的变化。audio元素有一个currentTime属性可以设置audio标签进度（即到达指定时间），可以通过监控range的变化，实时更改audio的currentTime来实现拖动改变音频进度。

<input type="range" ref="range" @input="onChange" @change="onChange" min="0" max="360" value="0">

注：这里将range分成了360份，后面的计算均和360相关，当然可以根据自己的需要设置。

// range--拖动进度条得到的回调
onChange() {
   
   
    let value = this.$refs.range.value;
   	// 控制进度条样式
    const persentage