- 当前 Bug 的表现(可附上截图)
InnerAudioContext播放完以后再次播放,onTimeUpdate生命周期不会再次触发,但是onPlay,onEnd都能正常触发
- 预期表现
每次audio组件重新播放都能触发onTimeUpdate
- 复现路径
- 提供一个最简复现 Demo
InnerAudioContext.onTimeUpdate再次调用不触发
最近也碰到这个问题。发现如果不去读取innerAudioContext.paused这个变量,它不会主动更新。解决问题的思路就是在调用play()方法之后再主动读取一次paused变量。可以写一个settimeout函数。
this.data.innerAudioContext.seek(0)
this.data.innerAudioContext.play()
setTimeout(() => {
console.log(this.data.innerAudioContext.paused)
}, 100)
华为nova 2s 测试可跟随循环播放进行循环触发,但在开发工具上在开始第二次播放后便停止触发------同求解决办法,尚未在iphone真机测试,不知目前是否仅是开发工具上如此
目前解决的大致思路是
猜测:开发工具中仅在新建InnerAudio实例时触发“一轮”onTimeUpdate直至一轮播放结束
大体解决思路: “互相传球”——新建两个InnerAudio实例,互相在对方onEnded时新建对方实例,同时在对方实例中销毁自己(注意innerAudio.loop不能设置为true,实践证明这样无法触发onEnded!------此时一想,莫非开发工具中onTimeUpdate的触发和onEnded的触发存在某种未知联系?)
具体一点点:
通过在Page({})下分别新建两个InnerAudio实例,实例中分别在onEnded时新建另一各实例,而同时另一个实例中销毁前一个audio实例…从而实现“互相传球”
主要代码如下(具体功能可无视):
toAC_0: function () {
console.log(‘target_0’)
let _this = this
if (_this.audioContext_1.play) {//如果第二个audio实例存在,则销毁
_this.audioContext_1.destroy()
_this.audioContext_1 = null
}
_this.audioContext_0 = new Object()//因为在_this.toAC_1中_this.audioContext_0已经被赋值null(原因略)
_this.audioContext_0 = wx.createInnerAudioContext()
_this.audioContext_0.src = ‘cloud://superteam-hzq0j.7375-superteam-hzq0j-1300417025/app/login/bgm.mp3’
_this.audioContext_0.autoplay = true
//_this.audioContext_0.loop = true
_this.audioContext_0.onEnded(() => {
console.log(‘onEnded_0!’)
_this.toAC_1()
})
_this.audioContext_0.onTimeUpdate(() => {
console.log(‘已触发onTimeUpdate_0!’)
console.log('onTimeUpdate-duration_0: ', _this.audioContext_0.duration)
let deg_0 = (360 * _this.audioContext_0.currentTime / _this.audioContext_0.duration + 45)
let deg = deg_0 <= 180 ? deg_0 : (deg_0 - 360)
let bgc = [deg, 128, 128, 128, 8, 245, 8]
console.log(bgc[0])
_this.setData({
bgc: bgc
})
})
_this.audioContext_0.onError(err => {
console.log(‘audioOnErr: (上次是音源有问题导致无法循环!可供参考)’, err)
})
},
toAC_1: function () {
console.log(‘target_1’)
let _this = this
if (_this.audioContext_0.play) {//如果第一个audio实例存在,则销毁
_this.audioContext_0.destroy()
_this.audioContext_0 = null
}
_this.audioContext_1 = new Object()//因为在_this.toAC_0中_this.audioContext_1已经被赋值null(原因略)
_this.audioContext_1 = wx.createInnerAudioContext()
_this.audioContext_1.src = ‘cloud://superteam-hzq0j.7375-superteam-hzq0j-1300417025/app/login/bgm.mp3’
_this.audioContext_1.autoplay = true
//_this.audioContext_1.loop = true
_this.audioContext_1.onEnded(() => {
console.log(‘onEnded_1!’)
_this.toAC_0()
})
_this.audioContext_1.onTimeUpdate(() => {
console.log(‘已触发onTimeUpdate_1!’)
console.log('onTimeUpdate-duration_1: ', _this.audioContext_1.duration)
let deg_0 = (360 * _this.audioContext_1.currentTime / _this.audioContext_1.duration + 45)
let deg = deg_0 <= 180 ? deg_0 : (deg_0 - 360)
let bgc = [deg, 128, 128, 128, 8, 245, 8]
console.log(bgc[0])
_this.setData({
bgc: bgc
})
})
_this.audioContext_1.onError(err => {
console.log(‘audioOnErr: (上次是音源有问题导致无法循环!可供参考)’, err)
})
},
addBgMusic: function () {
let _this = this
_this.bgmSrc = ‘cloud://superteam-hzq0j.7375-superteam-hzq0j-1300417025/app/login/bgm.mp3’
_this.audioContext_0 = new Object()
_this.audioContext_1 = new Object()
/**
* 此处通过
* let bgMusicaudioContext_0 = _this.audioContext_0
* 无法形成指向getApp().globalData.bgMusic.audioContext_0d的指针效果?
*/
if (_this.audioContext_0.play || _this.audioContext_1.play){//如果已经创建bgMusic,则直接播放(避免重复创建)
if (_this.audioContext_0.play){
_this.audioContext_0.play()
}
else{
_this.audioContext_1.play
}
}
else{
_this.toAC_0(_this)
}
},
removeBgMusic: function(){
/*
//对于微信小程序社区所讨论innerAudioaudioContext_0.destroy()的不确定性
//此处采用先stop,再destroy
//确保不会意外的无法停止播放
*/
let _this = this
if (_this.audioContext_0 || _this.audioContext_1) {//多这一层if为了看起来“局部整体化”
/**
* 经测试,destroy并未真正销毁innerAudioaudioContext_0
*/
if (_this.audioContext_0) {//加这一层为了避免直接访问_this.audioContext_0.play出错
if (_this.audioContext_0.play){
_this.audioContext_0.destroy()
_this.audioContext_0 = null
}
}
if (_this.audioContext_1) {//加这一层为了避免直接访问_this.audioContext_1.play出错
if (_this.audioContext_1.play){
_this.audioContext_0.destroy()
_this.audioContext_0 = null
}
}
}
},
现已经在开发工具中和真机 华为 nova 2s真机中测试可无限循环触发onTimeUpdate(参看console.log内容可知)
小白的学习之路,如有可改进之处,请指教!谢谢!