莫名其妙的改好问题了,由于播放是在子组件中实现,之前是子组件中自己通过createWebAudioContext创建音频上下文进行播放,后来因为要控制多个子组件的音频播放冲突问题,于是改成在父组件中createWebAudioContext后将音频上下文对象传给子组件,大家公用一个,结果播放不完整的问题就修复了,我目前还没想明白原因。。。
基础库2.32.3:WebAudioContext解码音频后播放,生产播放不完整,体验版正常?测试机型:iOS13、iOS13 pro; 微信版本:8.0.38; 基础库:体验/开发环境测试了2.32.2、2.32.3,线上环境不确定,应该是2.32.2吧 实现方式:使用 wx.createWebAudioContext()进行播放,将arrayBuffer的音频通过audioContext.decodeAudioData解码后,创建BufferSourceNode进行播放; 现象:在本地调试、预览、体验版上测试都没问题,可以正常播放音频,只有线上版本的音频播放不完整,会出现播放中断现象(只播放前一段,后半段大概率无声音)。iOS上出现概率很大,Android机暂未复现。 并且测试或者体验版打开调试时,生产环境小程序也可出现控制台的情况下,音频都播放正常,未出现不完整情况,关闭调试后重启小程序,线上版本播放出现不完整。 有大佬知道遇到过这个问题嘛?线上控制台调出来就不复现了,关控制台后复现概率好大,崩溃。。 根据线上版本的页面交互看,source.onended回调是在实际音频播放时长后触发,并不是在音频中断的时候就触发,所以推测实际上播放器应该还一直在工作,只不过没有声音(例如三秒的音频只播放了一秒,后两秒没声音,但onended在三秒后触发) 贴出播放相关的部分代码参考: this.playStatus = 1; //微信小程序需要用WebAudioContext来播放base64数据(innerAudioContext不支持) // #ifdef MP-WEIXIN //先暂停,防止其他使用audioContext的组件有正在播放的音频产生冲突 this.audioContext.state !== 'suspended' && this.audioContext.suspend() try { //需要去掉换行这些符号,不然base64ToArrayBuffer会报错 const base64 = this.content.nodevoid.replace(/[\r\n]/g, "") let arrayBuffer = uni.base64ToArrayBuffer(base64) this.audioContext.decodeAudioData(arrayBuffer, buffer => { console.log('robot decodeAudioData:', buffer) const duration = buffer.duration try { this.source = this.audioContext.createBufferSource() console.log('robot create bufferSource :', this.source) //音频播放器被暂停时,当前场景有其他的音频播放,为防止声音重叠设置的暂停 this.audioContext.onstatechange = () => { console.log('robot onstatechange:', this.audioContext.state, this.playStatus) if (this.audioContext.state === 'suspended' && this.playStatus === 1) { this.source.stop() } } this.source.buffer = buffer this.source.connect(this.audioContext.destination) //回调播放结束事件,自动播放时用(有几率触发不了,原因没查到,先做个处理) this.source.onended = () => { console.log('robot play ended') this._playEnd() } console.log('robot connect destination :', this.audioContext.destination) this.audioContext.state === 'suspended' && this.audioContext.resume() this.source.start(0) console.log('robot play start ', this.source) //定时器为了应对偶先不触发onended的情况,duration向上取整,时间稍微多一点点,防止有播放不完全的情况 this.endTimer = setTimeout(() => { console.log('robot play ended(timeout)') this._playEnd() }, Math.ceil(duration) * 1000) } catch (e) { console.error('robot play catch error ', e) } }, err => { console.error('robot decodeAudioData fail', err) }) } catch (e) { console.warn('robot play error:', e) } // #endif _playEnd() { this.playStatus = 0 if(this.endTimer) { clearTimeout(this.endTimer) this.endTimer = 0 } this.$emit('play-ended') } 补充: 后来意外的找到微信客户端为8.0.29和8.0.30版本,测试了下线上的音频播放是没问题的,推测可能是高版本的播放问题,因为目前测试的微信都是8.0.38,都有问题,所以暂时没更多对比,不好推测问题出在哪。
2023-06-25