uni-app中uni.createInnerAudioContext()音频播放设置循环播放后，中间会卡顿一下

项目信息	详情
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	10
HBuilderX类型	正式
HBuilderX版本号	3.96
手机系统	全部
手机厂商	苹果
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

测试过的手机：

iphone 15 pro/11/13/12promax：ios卡顿明显，大概半秒左右
vivo s7/huawei nova7/ 安卓卡顿不明显，但是也有100毫秒左右，不同手机表现不一样

示例代码：

startMIc() {  
    this.whiteAudio = uni.createInnerAudioContext();  
    this.woodAudio = uni.createInnerAudioContext();  
    let soundMic = uni.getStorageSync('micValue');  
    if (soundMic == '') {  
        console.log('内存没存值')  
        //初始化  
        let micValue = {  
            whiteNoise: '',  
            micMode: '',  
            woodMic: ''  
        };  
        let isMute = '../../static/noise/yichichunjiulv.mp3'; //初始白噪音路径  
        let isWood = '../../static/noise/moren.mp3';  
        micValue.micMode = 1;  
        micValue.whiteNoise = isMute;  
        micValue.woodMic = isWood;  
        this.whiteAudio.src = isMute;  
        this.woodAudio.src = isWood;  
        uni.setStorageSync('micValue', micValue);  
    } else {  
        this.whiteAudio.src = soundMic.whiteNoise;  
        this.woodAudio.src = soundMic.woodMic;  
    }  
    this.whiteAudio.loop = true;  
    if (uni.getSystemInfoSync().platform != "ios") {  
        this.whiteAudio._options.sessionCategory = "ambient";  
        this.woodAudio._options.sessionCategory = "ambient";  
    }  
    this.whiteAudio.autoplay = true;  
    this.whiteAudio.play();  
    //木鱼  
    this.woodAudio.loop = true;  
    this.woodAudio.autoplay = true;  
    this.woodAudio.play();  
    console.log(this.woodAudio)  
},

操作步骤：

开始播放音乐，app内敲木鱼的声音30s重复一次，但是循环时中间会卡顿，导致敲木鱼节奏会变化，体验很差

预期结果：

循环播放不卡顿

实际结果：

循环播放中间会卡顿

phonegap100 1楼•3 天前

安卓下载链接：https://sj.qq.com/appdetail/com.dolphinflow.focus

htzhanglong 2楼•3 天前

在 uni-app 中使用 uni.createInnerAudioContext() 播放音频时，如果设置了循环播放（loop: true），可能会遇到音频在循环时出现卡顿的情况。这是因为在音频播放结束后，重新开始播放时，音频资源需要重新加载或解码，导致短暂的卡顿。

解决方案

使用 onEnded 事件手动控制循环播放：你可以通过监听 onEnded 事件，在音频播放结束后立即重新播放，而不是依赖 loop: true。这样可以减少卡顿。

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'your-audio-file.mp3';
innerAudioContext.loop = false; // 不设置循环播放

innerAudioContext.onEnded(() => {
    innerAudioContext.seek(0); // 跳转到音频开始位置
    innerAudioContext.play();  // 重新播放
});

innerAudioContext.play();

使用 seek 方法提前跳转：在音频即将结束时，提前跳转到音频的开始位置，这样可以减少重新加载或解码的时间。

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'your-audio-file.mp3';
innerAudioContext.loop = false; // 不设置循环播放

innerAudioContext.onTimeUpdate(() => {
    if (innerAudioContext.currentTime >= innerAudioContext.duration - 0.1) {
        innerAudioContext.seek(0); // 提前跳转到开始位置
    }
});

innerAudioContext.play();

使用 Web Audio API：如果你需要更高级的音频控制，可以考虑使用 Web Audio API，它提供了更精细的音频处理能力，可以减少卡顿。

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createBufferSource();

fetch('your-audio-file.mp3')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
    .then(audioBuffer => {
        source.buffer = audioBuffer;
        source.loop = true;
        source.connect(audioContext.destination);
        source.start(0);
    });