持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情
一、前言
最近项目里有个需要用到音频播放的地方，原生的比较麻烦，而且似乎会遇到一些问题，所以我就寻思着去插件市场瞅瞅，看看有没有什么比较好用的插件，省时省力，岂不美哉，最终我就发现了这款vue-aplayer插件，虽然只支持vue2，但对于公司的老项目来说刚好够用，接下来让我们来看看这到底是个什么玩意儿吧。
二、使用过程
1、下载两个东西
第一个是本体
npm install vue-aplayer -save
如果出现下面这种hls.js警告，那就是缺少依赖了
Can't resolve 'hls.js' in 'D:\MyProject\private-ashcan\frontend\node_modules\vue-aplayer\dist'
下载第二个hls.js，两者是相辅相成的
npm install hls.js --save
2、按需引入使用
引入
import vueAplayer from 'vue-aplayer'
注册组件
components: {
vueAplayer
},
声明好音频变量
// 音频
audio: [{
title: '',
artist: '',
url: require('@/assets/test1.mp3'),
pic: '',
lrc: '',
theme: ''
}]
在template是使用该组件，是不是很简单。
<vueAplayer ref="messagePlayer"
:music="audio[0]"
:list="audio"
:showlrc="false"
:mutex="false"
:list-folded="true">
</vueAplayer>
下面就能出现一个音乐播放器了
3、属性值、方法和注意事项
用法是比较简单的，只要了解下它对应的属性值和方法，就能简单使用。
（1）props值
| 变量名 | 类型 | 默认值 | 详情 |
|---|---|---|---|
| music | object | 必填，不然会报错 | 当前播放的音乐 |
| list | list | [] | 播放列表，如果非空，则默认展开 |
| mini | boolean | false | mini模式 |
| float | boolean | false | 是否允许拖放，即浮动模式 |
| showLrc | boolean | false | 歌词是否显示 |
| mutex | boolean | true | 本播放器播放音频时，暂停其他相同播放器 |
| theme | String | '#41b883' | 主题色来着，不过如果上面的music里有theme，则以music变量里的为准 |
| shuffle | boolean | false | 随机播放，对于一首则无区别 |
| repeat | String | 'no-repeat' | 循环模式： repeat-one单曲循环，repeat-all列表循环，no-repeat不循环 |
| listMaxHeight | String | none | 播放列表的最大高度，也可自定义样式 |
| listFolder | boolean | false | false收起播放列表，权重比第二项的list高 |
如果你的版本是v1.4.0之后那还有以下几个属性
| 变量名 | 类型 | 默认值 | 是否可变 | 详情 |
|---|---|---|---|---|
| autoplay | boolean | false | false | 自动播放，但是多个该类型播放同时设置autoplay，只有第一个会自动播放 |
| controls | boolean | false | true | 显示原生audio元素 |
| muted | boolean | false | true | 静音 |
| preload | String | none | true | 只能修改为none、metadata、auto |
| volume | number | 0.8 | true | 音量 |
补充说明下preload，同时如果autoplay启用了，那preload则失效。
（2）music变量
上面我们定义个了audio变量，下面是各项变量的含义，除了url是必填项之外，其他可留空。
// 音频
audio: [{
title: '', // 歌曲名称，我没填所以是默认值的Untitled
artist: '', // 演唱者名称，我没填所以是默认值的Untitled
url: require('@/assets/test1.mp3'), // 音乐路径，可本地可在线
pic: '', // 封面图片路径，默认为none
lrc: '', // 歌词文件路径，默认为none
theme: '' // 歌曲主题色，权重比上面props的要高
}]
（3） 方法事件
| 事件名 | 参数 | 详情 |
|---|---|---|
| play | none | 开始播放 |
| pause | none | 暂停播放 |
| canplay | none | 数据支持播放时触发 |
| playing | none | 播放过程中定时触发 |
| ended | none | 停止播放 |
| error | none | 出现错误的时候触发 |
| update:mode | none | mode属性更改时触发 |
我简单举个例子，比如我挂载了 ref="messagePlayer"
那我就能在资源加载之后，指的是页面渲染完毕了，音频也拿到了的情况下，调用
this.$refs.messagePlayer.play()
进行音乐播放。
（4） 注意事项
如果使用了autoplay，那必须确保页面和资源都加载完毕之后，再加载该播放器，可以用v-if进行控制，总之就是一切操作，都是在资源加载好的前提下才能进行的。
三、小结
今天又发现了一款宝藏插件，记录一下，以后也可以使用
ps: 我是地霊殿__三無，滴，下班卡。
