Chrome环境下Web Audio API录制音频经MSE播放出现爆音及音轨提前结束问题

修复方案 #

• 调整AudioContext采样率适配输入流，避免重采样漂移：Chrome中如果输入MediaStream的音频采样率和AudioContext强制指定的48000不匹配，内部重采样逻辑长时间运行会产生样本累计偏移，最终导致音轨时长不足、爆音。修改初始化逻辑如下：

// 优先取输入音频流的原生采样率
const inputAudioTrack = input.stream.getAudioTracks()[0];
const trackSettings = inputAudioTrack.getSettings();
const nativeSampleRate = trackSettings.sampleRate || 48000;

let audioContext: AudioContext | null = null;
if (window.AudioContext) {
    // 调整latencyHint为playback降低处理抖动，适配录制场景
    audioContext = new AudioContext({ 
        sampleRate: nativeSampleRate, 
        latencyHint: 'playback' 
    });
} else if ((window as any).webkitAudioContext) {
    audioContext = new (window as any).webkitAudioContext() as AudioContext;
}

• 给MediaRecorder指定固定的音视频编码参数，避免Chrome动态码率生成MSE不兼容的分片：

const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/webm; codecs="vp9, opus"',
    audioBitsPerSecond: 128000,
    videoBitsPerSecond: 3000000
});

• 流式追加SourceBuffer前校验时间戳连续性：每次追加分片前，对比当前分片的起始时间和上一个分片的结束时间，差值超过10ms时手动设置当前分片的timestampOffset补正偏移，避免MSE解码器丢帧产生爆音。
• 临时兼容方案：如果以上调整无法完全解决问题，可以先将所有录制的webm分片合并为完整Blob，再将Blob转换为ArrayBuffer一次性写入SourceBuffer，而非流式追加，该方案可规避绝大多数Chrome下Web Audio + MSE的兼容问题。

根因说明 #

Chrome的Web Audio模块与MediaRecorder模块对接存在未修复的隐性问题：AudioContext输出的MediaStream直接送入MediaRecorder时，生成的webm分片的音频时间戳会存在微秒级的累计误差，普通播放器（包括Blob URL播放、本地播放器）可以自动修正该误差，但Chrome自带的MSE解码逻辑对时间戳精度要求极高，误差累计到一定阈值就会产生爆音，长时间录制后误差累计到秒级就会出现音轨提前结束的问题。

内容的提问来源于stack exchange，提问作者siride