基于vue的语音播放器（语音条）

最近公司项目需要在移动端页面中使用语音播放功能，直接使用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

Github:https://github.com/826327700/vue-mobile-audio