uni-app中uni.createInnerAudioContext()循环多次问题

uni-app中uni.createInnerAudioContext()循环多次问题

音频组件每点击一次播放暂停，onPlay和onPause都会增加一次打印

this.startPlay=!this.startPlay;  
if(this.startPlay){  
    this.audio.play();  
    this.audio.onPlay(()=>{  
        console.log('播放');  
    })  
}else{  
    this.audio.pause();  
    this.audio.onPause(()=>{  
        console.log('暂停');  
    })  
}

是我操作不对，还是这是个bug???

Image Image


更多关于uni-app中uni.createInnerAudioContext()循环多次问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

哪端？

更多关于uni-app中uni.createInnerAudioContext()循环多次问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


h5,chrome

这是BUG吗？

找到问题所在,onPlay是监听方法，即只需要在页面中定义一次即可，后续播放暂停会自动进入，我上面写法由于没有取消监听，所以每次点击播放暂停都会增加一次监听方法，提个小小的建议，加个判断值，默认是不管我写多少次监听都会覆盖之前的监听，即只有一个监听，加上某个值后如true，才允许多个监听

最后怎么写的

这是因为你在每次播放/暂停时都重新绑定了事件监听器，导致事件被多次触发。正确的做法是在初始化音频组件时就绑定事件，而不是在每次操作时重复绑定。

修改后的代码应该是：

// 初始化时绑定事件
this.audio = uni.createInnerAudioContext();
this.audio.onPlay(() => {
    console.log('播放');
});
this.audio.onPause(() => {
    console.log('暂停');
});

// 操作时只控制播放状态
this.startPlay = !this.startPlay;
if(this.startPlay){
    this.audio.play();
}else{
    this.audio.pause();
}
回到顶部