基於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…