uniapp實現(xiàn)微信小程序音頻播放功能

最近需要有個項目需要用到音頻播放，第一個想到的是audio標(biāo)簽，但是查閱了uniapp官方文檔，發(fā)現(xiàn)audio組件已經(jīng)不維護(hù)了。
官網(wǎng)推薦使用uni.createInnerAudioContext api來實現(xiàn)音頻播放。這篇文章最終實現(xiàn)了音頻播放倒計時的功能,完整代碼在文章最后。 一起來共同學(xué)習(xí)吧~

• 實現(xiàn)音頻播放功能，通過點擊播放按鈕實現(xiàn)音頻播放，關(guān)鍵代碼如下：

<button @click="audioPlay">點擊播放音頻</button> data() {return {audioForm:{//音頻播放路徑src:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',}} }, methods:{audioPlay(){const innerAudioContext = uni.createInnerAudioContext();innerAudioContext.autoplay = true;innerAudioContext.src = this.audioForm.src;innerAudioContext.onError((res) => {//如果音頻沒有正常播放console.log(res.errCode);})} }

如果點擊按鈕音頻沒有正常播放，查看控制臺res.errCode的值

如果res.errCode=10004時，請查看你的音頻格式，有些音頻格式是只支持安卓或ios的，安卓和ios都支持的格式有m4a、wav、mp3、aac。具體參考一下uniapp官網(wǎng)文檔. 如果想進(jìn)入頁面時自動播放，把**audioPlay()**在onLoad()生命周期中調(diào)用就好了。

• 實現(xiàn)音頻播放時，時間倒計時功能。類似于微信語音條。
  實現(xiàn)思路如下:
  在audioForm中添加兩個變量，duration和times，分別用來記錄倒計時和音頻總長度。
  在audioPlay()中點擊播放視頻時保存音頻總時間，以及在播放過程中，給倒計時重新賦值，并且用音頻總時間-當(dāng)前播放第幾秒，完成倒計時的功能。

//音頻開始播放時會調(diào)用以下函數(shù), innerAudioContext.onCanplay(() => {innerAudioContext.duration;setTimeout(() => {//保存總時長，這里需要用到定時器，讓函數(shù)延遲執(zhí)行，不然獲取不到值//innerAudioContext對象中的duration和buffered代表音頻總時長this.audioForm.times = innerAudioContext.duration.toFixed(0)}, 10) }) //音頻播放的過程中會調(diào)用以下函數(shù) innerAudioContext.onTimeUpdate(() => {//innerAudioContext對象中的currentTime代表當(dāng)前音頻播放到第幾秒了。//用總時長減去當(dāng)前播放的到第幾秒了,然后賦值給倒計時，就實現(xiàn)了倒計時的功能。this.audioForm.duration = this.audioForm.times - innerAudioContext.currentTime.toFixed(0) })

• 完整代碼如下：

<view><button @click="audioPlay">點擊播放</button><text v-if="audioForm.duration">音頻播放倒計時:{{audioForm.duration}}</text></view> data() {return {audioForm: {//音頻路徑src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',//倒計時duration: '',//音頻長度times: ''},}},methods: {//點擊按鈕實現(xiàn)音頻播放倒計時的效果audioPlay() {const innerAudioContext = uni.createInnerAudioContext();innerAudioContext.autoplay = true;innerAudioContext.src = this.audioForm.src;innerAudioContext.onPlay(() => {console.log('開始播放');});//音頻剛開始播放時會調(diào)用以下函數(shù)innerAudioContext.onCanplay(() => {console.log(innerAudioContext)innerAudioContext.duration;setTimeout(() => {//保存總時長，這里需要用到定時器，讓函數(shù)延遲執(zhí)行，不然獲取不到值//innerAudioContext對象中的duration和buffered代表音頻總時長this.audioForm.times = innerAudioContext.duration.toFixed(0)}, 10)})//音頻播放的過程中會調(diào)用以下函數(shù)innerAudioContext.onTimeUpdate(() => {//innerAudioContext對象中的currentTime代表當(dāng)前音頻播放到第幾秒了。//用總時長減去當(dāng)前播放的到第幾秒了,然后賦值給倒計時，就實現(xiàn)了倒計時的功能。this.audioForm.duration = this.audioForm.times - innerAudioContext.currentTime.toFixed(0)})//音頻播放異常時調(diào)用以下函數(shù)innerAudioContext.onError((res) => {console.log(res.errCode);})}}

以上就是通過uniapp中的uni.createInnerAudioContext api來實現(xiàn)音頻播放時倒計時的功能實現(xiàn)過程以及思路啦，更多詳細(xì)信息請移步鏈接: uniapp官方文檔音頻組件控制。

總結(jié)

以上是生活随笔為你收集整理的uniapp实现微信小程序音频播放倒计时的功能，类似微信语音条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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