微信小程序-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()
})
},
微信小程序-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()设置数组对象的某个元 ...
最新文章
- PCL：自定义创建带颜色的点云保存后rgb是一个很大的数，由x y z rgb解包为x y z r g b
- 校招经验分享—高考结束！校招还会远么～～
- AMD与intel CPU型号大全(接口)
- RHCE是否还值得考取？
- spring-boot-2.0.3之quartz集成，不是你想的那样哦！
- js粘贴板为什么获取不到图片信息_【第1829期】复制黏贴上传图片和跨浏览器自动化测试...
- linux内核模块常见问题
- 关于python 和C++使用cv画矩形并填充颜色同时填充文字
- python找不到模块pyodbc_“import pyodbc”导致“没有名为pyodbc的模块”
- Babel 6.25 版本发布，JavaScript 编译器
- 分享Java 中如何运行字符串表达式？
- 程序执行系统VC++程序出现“试图执行系统不支持的操作”
- 角色从项目经理转换ScrumMaster的一些思考和总结
- 随便看看AutoGluon-Tabular
- 阿里视觉AI训练营-day05-创意日-你的图像识别项目
- 传感器极性NPN和PNP区别！！！
- react中请求网络图片加载不出来的问题 解决
- iOS自学-混合编程
- 几种修复照片画质的方法
- PCB邮票孔的作用及详细设计指南