uni-app音频播放没声音问题

uni-app音频播放没声音问题

uni-app打包的Android App,按钮触发播放,在多次播放后(不确定多少次,每次都不一样),就会出现没声音的情况,然后把app重启了之后就又有声音了.

addCode(result) {  
    if (this.codes.includes(result)) {  
        // 发出重复扫码的提示音  
        // 优先判断是否重复扫码(避免产品流速过快,想要确定哪个产品是这一箱的最后扫的一个产品都不可以)  
        // 不要弹窗需要确认的提示弹窗,因为流水线不会停下来让用户按那个返回  
        console.log('重复扫码,播放失败声音')  
        const failAudio = uni.createInnerAudioContext();  
        failAudio.src = '/static/sound/fail.mp3'  
        failAudio.play()  
        // failAudio.destroy()  
        this.$refs.uToast.show({  
            title: `提示: 重复扫码(${result})`,  
            type: 'error'  
        })  
    } else {  
        const itemData = this.$refs.detailForm.getFieldsValue()  
        // 判断是否整箱,是否扫满  
        console.log('个数', itemData.pack_conversion, this.codes.length)  
        if (this.codes.length >= itemData.pack_conversion) {  
            console.log('已经完成所有扫码,播放失败声音')  
            const failAudio = uni.createInnerAudioContext();  
            failAudio.src = '/static/sound/fail.mp3'  
            failAudio.play()  
            // failAudio.destroy()  
            this.$refs.uToast.show({  
                title: `提示: 已完成整箱扫码,不能再录入(${result})`,  
                type: 'error'  
            })  
            return false  
        }  
        this.codes.unshift(result)  
        if (itemData.box_type !== 2 && (Number(itemData.pack_conversion) === this.codes.length)) {  
            console.log('扫码完成,播放完成声音')  
            const completeAudio = uni.createInnerAudioContext();  
            completeAudio.src = '/static/sound/complete.mp3'  
            completeAudio.play()  
            // completeAudio.destroy()  
            this.$refs.uToast.show({  
                title: `提示: 已完成所有扫码(${result})`,  
                type: 'success'  
            })  
        } else {  
            const successAudio1 = uni.createInnerAudioContext();  
            console.log('扫码成功,播放成功声音')  
            successAudio1.src = '/static/sound/success_1.mp3'  
            successAudio1.play()  
            this.$refs.uToast.show({  
                title: `提示: 录入成功(${result})`,  
                type: 'primary'  
            })  
        }  
    }  
},

更多关于uni-app音频播放没声音问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

在播放结束后销毁当前示例试试还会有这个问题吗？ Audio.onEnded(function() {
Audio.destroy();
});

更多关于uni-app音频播放没声音问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


试了,暂时没有用户反映这个问题.

回复 起風了: 在播放结束后销毁当前实例，还是一会播放有声音，一会播放没声音，醉了，不知道到底因为啥，昨天下班之前没声音，下班回家之后app再发语音就有声音了，早上试了也有声音，刚刚新发的语音还有声音，现在新发的又没有声音了

我也遇到了 扫码成功提示了十几次 音效就没有了 有解决方案么？

就是楼上说的那样,每次play之后都把播放的销毁.

这是一个典型的音频资源未正确释放导致的内存泄漏问题。每次触发播放时都创建新的InnerAudioContext实例，但未及时销毁，造成系统音频资源耗尽。

解决方案：

  1. 预创建音频实例并复用
data() {
  return {
    audioInstances: {
      fail: null,
      complete: null,
      success: null
    }
  }
},
onLoad() {
  // 预创建音频实例
  this.audioInstances.fail = uni.createInnerAudioContext();
  this.audioInstances.fail.src = '/static/sound/fail.mp3';
  
  this.audioInstances.complete = uni.createInnerAudioContext();
  this.audioInstances.complete.src = '/static/sound/complete.mp3';
  
  this.audioInstances.success = uni.createInnerAudioContext();
  this.audioInstances.success.src = '/static/sound/success_1.mp3';
},
methods: {
  addCode(result) {
    // 复用音频实例
    if (this.codes.includes(result)) {
      this.audioInstances.fail.play();
      // ... toast提示
    } else {
      // ... 其他逻辑使用对应的音频实例
    }
  }
},
onUnload() {
  // 页面卸载时销毁音频实例
  Object.values(this.audioInstances).forEach(audio => {
    audio.destroy();
  });
}
  1. 添加错误监听和状态管理
// 在创建音频实例后添加
this.audioInstances.fail.onError((res) => {
  console.error('音频播放失败:', res);
});
  1. 确保单次播放 在快速连续触发时，先停止当前播放再重新播放：
playAudio(audioInstance) {
  audioInstance.stop();
  audioInstance.play();
}
回到顶部