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

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

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

因而就只能本身作一个播放器了：

1.编写播放器样式

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

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

安装：

npm install vue-mobile-audio

使用：

props	类型	默认值	描述
src	string	无	音频播放地址（ogg,mp3,wav）
text	string	轻触播放	播放器上的提示文字
showDuration	boolean	true	是否显示时长
block	boolean	true	播放器是否为块级元素

注：若显示时长，时长将替换提示文字

效果截图：

Github:github.com/826327700/v…