微信小程序-wx.createInnerAudioContext的方法执行多次问题

微信小程序-wx.createInnerAudioContext的方法执行多次问题

在项目中用wx.createInnerAudioContext做语音播放这一块，测试的时候发现第一次播放的时候onPlay和onEnd执行了一次，第二次播放时执行了两次，第三次执行三次，依次类推。

去开发文档里面看了一下它的示例，和它写的一样的，也是先创建一个innerAudioContext，然后在用户的事件里面调用onPlay，onEnd，onError等方法。

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/Sourcemyx/article/details/79424004）看到了相关解答。

回调事件是每一次触发都会注册一次，也就是这个回调触发过一次。这个回调就一直存在了，所以不需要一直去创建。

解决方案一：

在page外

const innerAudioContext = wx.createInnerAudioContext()

把所有的回调都写在onLoad中，在页面加载及注册。不需要重复。

onLoad: function (options) {

innerAudioContext.onPlay(() => {

console.log('开始播放')

that.setData({ audioStatus: true })

})

 

innerAudioContext.onEnded(() => {

console.log('播放结束')

that.setData({ audioStatus: false })

})

innerAudioContext.onError((res) => {

console.log(res.errMsg)

console.log(res.errCode)

})

}

但是在我的实际项目中，一个页面有两种形式的语音播放，一个是播放语音列表里面的语音，一个是预听当前用户待提交的语音。这两种的onPlay和onEnd回调内部执行的不一样，不可能在onLoad里面用同一个回调,下面就是第二个解决方案

解决方案二：

在点击事件里面创建innerAudioContext实例对象，在播放当前音频的自然播放结束onEnd的回调事件里面和音频播放错误onError回调事件，里面调用destory方法销毁该实例。

//列表播放录音

play: function (e) {

var that = this;

console.log(e)

 

const innerAudioContext = wx.createInnerAudioContext()

var comment = this.data.comment;

var index = e.currentTarget.dataset.id;

innerAudioContext.autoplay = true

innerAudioContext.src = comment[index].voiceUrl;

for (var i = 0; i < comment.length; i++) {

comment[i].audioStatus = false

}

comment[index].audioStatus = true;

 

innerAudioContext.onPlay(() => {

console.log('开始播放')

that.setData({

comment: comment,

})

})

 

innerAudioContext.onEnded(() => {

console.log('播放结束')

comment[index].audioStatus = false;

that.setData({

comment: comment,

})

//播放结束，销毁该实例

innerAudioContext.destroy()

})

 

innerAudioContext.onError((res) => {

console.log(res.errMsg)

console.log(res.errCode)

//播放错误，销毁该实例

innerAudioContext.destroy()

 

})

},

 

//预听录音

play2:function(e){

var that = this;

 

const innerAudioContext2 = wx.createInnerAudioContext()

innerAudioContext2.autoplay = true

innerAudioContext2.src = e.currentTarget.dataset.url;

innerAudioContext2.onPlay(() => {

console.log('play2开始播放')

that.setData({ audioStatus: true })

})

 

innerAudioContext2.onEnded(() => {

console.log('play2播放结束')

that.setData({ audioStatus: false })

//播放结束，销毁该实例

innerAudioContext2.destroy()

})

 

innerAudioContext2.onError((res) => {

console.log(res.errMsg)

console.log(res.errCode)

//播放错误，销毁该实例

innerAudioContext2.destroy()

 

})

},