uni-app uni.createInnerAudioContext() 偶尔出现没有声音的情况

开发环境	版本号	项目创建方式
Mac	12.6.5	HBuilderX

示例代码：

/**
 * 播放音频
 * @param {string} type warn | right
 */
const playVoice = (type) => {
    console.log('playVoice', type);
    return new Promise((resolve) => {
        const audioContext = uni.createInnerAudioContext();

        audioContext.onEnded(() => {
            console.log('onEnded');
            audioContext.destroy();
            // audioContext = null;
            resolve();
        });
        audioContext.onPlay(() => {
            console.log('onPlay');
        });
        audioContext.onError((err) => {
            console.log('onError', err);
        });

        audioContext.src = `/static/voice/${type}.mp3`;
        audioContext.play();
        console.log('audioContext', audioContext);
    });
};

// 调用的代码↓
// 播放声音
playVoice('right');
// data是接口返回的列表数据，需要渲染
this.offset = 0;
this.list = data;

操作步骤：

接口返回成功后把data赋值显示，并且播放成功声音

预期结果：

每次都有声音

实际结果：

经常10次有3次没有声音

bug描述：

使用 uni.createInnerAudioContext(); 播放音频，偶尔出现不播放情况

调用playVoice()后，预期的打印：

playVoice,  right at func/voice.js:6
audioContext,  [Object] {"id":"17167973772550.6597362822302588","_callbacks":{"canplay":[],"play":["function() { [n...}
onPlay at func/voice.js:17
onEnded at func/voice.js:11

实际偶尔出现不播放声音的情况：

16:18:50.481 playVoice,  right at func/voice.js:6
16:18:50.580 audioContext,  [Object] {"id":"17167979304380.8191429725832422","_callbacks":{"canplay":[],"play":["function() { [n...}
// ↑没有onPlay和onEnded

更多关于uni-app uni.createInnerAudioContext() 偶尔出现没有声音的情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 1楼

问题解决了么？我的也是，运行正常一段时间后会，再次进入或者播放途中突然没有了声音，退出页面后再进入依然不播放音频，关闭应用后再次进入才可以，这里和内存有关么？

更多关于uni-app uni.createInnerAudioContext() 偶尔出现没有声音的情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 2楼

声音问题基本解决了，你这个是没有销毁实例我的是在每次创建前销毁 let audioContext;

caililin 3楼作者

/**

htzhanglong 4楼

@param {string} type warn | right */ const playVoice = (type) => { return new Promise((resolve) => { audioContext?.destroy(); audioContext = uni.createInnerAudioContext(); audioContext.onEnded(() => { // 播放结束 resolve(); }); audioContext.onError((e) => { console.log(‘play voice error’, e); });

htzhanglong 5楼

}); };

ionicwang 6楼

export default playVoice;

sinazl 7楼

let audioContext;

/**

播放音频
@param {string} type warn | right
*/
const playVoice = (type) => {
return new Promise((resolve) => {
audioContext?.destroy();
audioContext = uni.createInnerAudioContext();
audioContext.onEnded(() => {
// 播放结束
resolve();
});
audioContext.onError((e) => {
console.log(‘play voice error’, e);
});
```
 audioContext.autoplay = true;  
 audioContext.src = `/static/voice/${type}.mp3`;  
```
});
};

export default playVoice;

wuwangju 8楼

在使用 uni.createInnerAudioContext() 时，偶尔出现没有声音的情况，可能由多种原因引起。以下是一些可能的原因及解决方法：

1. 音频资源加载问题

原因: 音频文件可能没有完全加载或加载失败，导致播放时没有声音。

解决方法: 确保音频文件路径正确，并且网络请求成功。可以通过监听 onError 事件来捕获加载错误。

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/audio.mp3';
innerAudioContext.onError((err) => {
    console.error('音频加载失败', err);
});
innerAudioContext.play();

2. 音频播放时机问题

原因: 在某些情况下，音频可能在页面加载完成之前就开始播放，导致没有声音。

解决方法: 确保在页面加载完成后再开始播放音频。可以在 onReady 事件中触发播放。

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/audio.mp3';
innerAudioContext.onReady(() => {
    innerAudioContext.play();
});

3. 音频格式或编码问题

原因: 某些音频格式或编码可能不被所有设备或浏览器支持，导致播放时没有声音。
解决方法: 确保使用广泛支持的音频格式（如 MP3），并检查音频文件的编码是否符合标准。

4. 音频上下文状态问题

原因: 音频上下文可能处于暂停或停止状态，导致没有声音。

解决方法: 确保音频上下文处于播放状态，并且没有被意外暂停或停止。

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/audio.mp3';
innerAudioContext.play();

// 确保没有在其他地方调用 pause 或 stop
// innerAudioContext.pause();
// innerAudioContext.stop();

5. 设备或浏览器限制

原因: 某些设备或浏览器可能有自动播放限制，特别是当用户没有与页面进行交互时。

解决方法: 确保在用户交互（如点击按钮）后触发音频播放。

document.getElementById('playButton').addEventListener('click', () => {
    const innerAudioContext = uni.createInnerAudioContext();
    innerAudioContext.src = 'https://example.com/audio.mp3';
    innerAudioContext.play();
});

6. 音量设置问题

原因: 音量可能被设置为 0 或静音，导致没有声音。

解决方法: 检查并设置音频的音量。

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/audio.mp3';
innerAudioContext.volume = 1; // 设置音量为 100%
innerAudioContext.play();

7. 内存或性能问题

原因: 在低内存或高性能消耗的情况下，音频可能无法正常播放。
解决方法: 优化应用性能，减少内存占用，确保音频播放时有足够的资源。

8. 跨域问题

原因: 如果音频文件存储在跨域服务器上，可能会遇到跨域问题，导致无法加载音频。
解决方法: 确保服务器配置了正确的 CORS 头，允许跨域访问。

9. 音频上下文生命周期问题

原因: 如果音频上下文在播放后被销毁或重新创建，可能会导致没有声音。
解决方法: 确保音频上下文在播放期间保持有效，避免频繁创建和销毁。

10. 调试与日志

原因: 没有足够的日志信息来定位问题。

解决方法: 添加详细的日志记录，捕获音频上下文的各个状态和事件，以便更好地调试问题。

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/audio.mp3';
innerAudioContext.onPlay(() => {
    console.log('音频开始播放');
});
innerAudioContext.onPause(() => {
    console.log('音频暂停');
});
innerAudioContext.onStop(() => {
    console.log('音频停止');
});
innerAudioContext.onError((err) => {
    console.error('音频播放错误', err);
});
innerAudioContext.play();