最近公司项目需要在移动端页面中使用语音播放功能，直接使用audio标签即可完成，但奈何默认的audio样式太丑，没办法，只能自己造轮子了。
默认样式：image
，在PC页面看起来还好，在移动端，这个样式不仅偏大，而且还显示了下载按钮，UI上显得不协调。
于是就只能自己做一个播放器了：
1.编写播放器样式
因为主要在移动端显示，所以借鉴了百度贴吧、微信中的语音条样式。使用div+css实现一个语音条外观。
image
2.使用js控制new Audio()的play等方法进行播放控制。
image
安装：
npm install vue-mobile-audio
使用：
image
image
| props | 类型 | 默认值 | 描述 |
|---|---|---|---|
| src | string | 无 | 音频播放地址（ogg,mp3,wav） |
| text | string | 轻触播放 | 播放器上的提示文字 |
| showDuration | boolean | true | 是否显示时长 |
| block | boolean | true | 播放器是否为块级元素 |
注：若显示时长，时长将替换提示文字
效果截图：
image
