最近公司項(xiàng)目需要在移動(dòng)端頁(yè)面中使用語(yǔ)音播放功能，直接使用audio標(biāo)簽即可完成，但奈何默認(rèn)的audio樣式太丑，沒(méi)辦法，只能自己造輪子了。

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

于是就只能自己做一個(gè)播放器了：

1.編寫播放器樣式

因?yàn)橹饕谝苿?dòng)端顯示，所以借鑒了百度貼吧、微信中的語(yǔ)音條樣式。使用div+css實(shí)現(xiàn)一個(gè)語(yǔ)音條外觀。

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

安裝：

npm install vue-mobile-audio

使用：

props類型默認(rèn)值描述

src	string	無(wú)	音頻播放地址（ogg,mp3,wav）
text	string	輕觸播放	播放器上的提示文字
showDuration	boolean	true	是否顯示時(shí)長(zhǎng)
block	boolean	true	播放器是否為塊級(jí)元素

注：若顯示時(shí)長(zhǎng)，時(shí)長(zhǎng)將替換提示文字

效果截圖：

Github:github.com/826327700/v…

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

總結(jié)

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

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