微信小程序-音頻播放-wx.createInnerAudioContext() 每次都是重復播放同一條錄音

前言

在調試微信小程序音頻播放時，剛開始我也是直接復制官方文檔的實例：

const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
innerAudioContext.onPlay(() => {
    console.log('開始播放')
})
innerAudioContext.onError((res) => {
    console.log(res.errMsg)
    console.log(res.errCode)
})

然而此時就出現了，無論按多少下都是重復播放同一條語音的情況！

從 https://blog.csdn.net/qq_39364032/article/details/79742120 得知，wx.createInnerAudioContext()這個api新建了一個實例之后，需要銷毀實例，才能重新new一個實例。所以，我做了以下改動：

const innerAudioContext = wx.createInnerAudioContext()
                    innerAudioContext.autoplay = true
                    innerAudioContext.src = res.tempFilePath
                    innerAudioContext.onPlay(() => {
                      console.log('開始播放')

                    })
                    innerAudioContext.onStop(() => {
                      console.log('i am onStop')
                      innerAudioContext.stop()
                      //播放停止，銷毀該實例
                      innerAudioContext.destroy()

                    })
                    innerAudioContext.onEnded(() => {
                      console.log('i am onEnded')
                      //播放結束，銷毀該實例
                      innerAudioContext.destroy()
                      console.log('已執行destory()')
                    })
                    innerAudioContext.onError((res) => {
                      console.log(res.errMsg)
                      console.log(res.errCode)
                      innerAudioContext.destroy()
                    })

最終解決方案

然而！無論我執行多少次，還是播放第一條語音！從我的后台來看，每次返回的語音文件都是不同的，甚至我把服務器上的文件下載到本地，也是不同的！於是我就懷疑它下載過一次這個地址就不再下載了。所以我又換一種寫法，在上面加上wx.downloadFile這個api。

wx.downloadFile({
                url: 'http://47.106.74.22:8081/voice/download_audio', //僅為示例，並非真實的資源
                success: function (res) {
                  // 只要服務器有響應數據，就會把響應內容寫入文件並進入 success 回調，業務需要自行判斷是否下載到了想要的內容
                  if (res.statusCode === 200) {
                    
                    const innerAudioContext = wx.createInnerAudioContext()
                    innerAudioContext.autoplay = true
                    innerAudioContext.src = res.tempFilePath
                    innerAudioContext.onPlay(() => {
                      console.log('開始播放')

                    })
                    innerAudioContext.onStop(() => {
                      console.log('i am onStop')
                      innerAudioContext.stop()
                      //播放停止，銷毀該實例
                      innerAudioContext.destroy()

                    })
                    innerAudioContext.onEnded(() => {
                      console.log('i am onEnded')
                      //播放結束，銷毀該實例
                      innerAudioContext.destroy()
                      console.log('已執行destory()')
                    })
                    innerAudioContext.onError((res) => {
                      console.log(res.errMsg)
                      console.log(res.errCode)
                      innerAudioContext.destroy()
                    })
 }
                }
              })

到這里，終於解決這個問題

注意的是，wx.createInnerAudioContext()無法播放wav文件，於是這里我用的是MP3文件。而wx.playVoice(OBJECT)也無法播放mp3文件。