最近公司項目需要在移動端頁面中使用語音播放功能，直接使用audio標簽即可完成，但奈何默認的audio樣式太丑，沒辦法，只能自己造輪子了。

默認樣式：，在PC頁面看起來還好，在移動端，這個樣式不僅偏大，而且還顯示了下載按鈕，UI上顯得不協(xié)調(diào)。

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

1.編寫播放器樣式

因為主要在移動端顯示，所以借鑒了百度貼吧、微信中的語音條樣式。使用div+css實現(xiàn)一個語音條外觀。

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…

轉(zhuǎn)載于:https://juejin.im/post/5bfb99d9518825741e7bd418

總結(jié)

以上是生活随笔為你收集整理的基于vue的语音播放器（语音条）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。