基于vue的语音播放器(语音条)

4,466 阅读1分钟

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

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

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

1.编写播放器样式

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


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


安装:

npm install vue-mobile-audio

使用:



props类型默认值描述
srcstring音频播放地址(ogg,mp3,wav)
textstring轻触播放播放器上的提示文字
showDurationbooleantrue是否显示时长
blockbooleantrue播放器是否为块级元素

注:若显示时长,时长将替换提示文字


效果截图


Github:github.com/826327700/v…