最近公司项目需要在移动端页面中使用语音播放功能，直接使用audio标签即可完成，但奈何默认的audio样式太丑，没办法，只能自己造轮子了。

默认样式：

，在PC页面看起来还好，在移动端，这个样式不仅偏大，而且还显示了下载按钮，UI上显得不协调。

于是就只能自己做一个播放器了：

1.编写播放器样式

因为主要在移动端显示，所以借鉴了百度贴吧、微信中的语音条样式。使用div+css实现一个语音条外观。

2.使用js控制new Audio()的play等方法进行播放控制。

image

安装：

npm install vue-mobile-audio

使用：

效果截图：

Github: