微信小程序-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()

})

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

微信小程序wx.createInnerAudioContext使用方法
1.创建audio对象 js开头: const myaudio = wx.createInnerAudioContext({}); 2.设置资源路径,onShow或者onLoad内设置 onShow: ...
微信小程序wx.createInnerAudioContext()在安卓手机不能播放语音文件问题解决
本文介绍小程序安卓手机播放语音文件错误问题的分析过程与解决方案,该问题出现较多,问题隐藏较深,按本文方案可以解决该问题. 一.问题现象微信小程序已经放弃了基于wx.createAudioContex ...
解决微信小程序 wx.request 方法不支持 Promise 并发数问题
wx-promise-request 是微信小程序 wx.request 方法的不支持 Promise 和并发数问题的解决方案.如果只需要解决并发数问题,可以使用wx-queue-request.js ...
微信小程序播放音乐的方法中的两种方法
微信小程序播放音乐的方法有很多种,这里总结一下其中两种的优缺点,主要是最近用到了 audio组件这个是最简单的 <audio src="播放链接" id="mus ...
微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下 ...
微信小程序 wx.setstoragesync和wx.setstorage 区别
相同点: 微信小程序 wx.setstoragesync和wx.setstorage都是能把值保存在微信小程序缓存中,类似于浏览器的localstorage概念区别: wx.setStorage是异 ...
企业微信小程序wx.qy.login 的调用调试踩坑
企业微信小程序wx.qy.login 的调用调试踩坑起步在企业微信的开发过程中有很多坑,一切以企业微信开发文档为准. 近期我公司项目需要我联调开发企业微信小程序,以前没开发过,所以一切只能跟着企业 ...
小程序setdata优化_微信小程序 setData的使用方法详解
微信小程序 setData的使用方法详解微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元 ...

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

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

最新文章

热门文章