JavaScript播放BASE64编码Wav音频如何消除切换延迟实现无缝循环

问题原因 #

你当前使用HTML5原生Audio元素实现循环播放出现间隙的核心原因是：onended属于异步回调事件，存在毫秒级的触发延迟，叠加play()方法执行时的状态校验、音频解码调度开销，必然会出现两段音频的衔接空白。

最优实现方案（无间隙精度最高） #

采用Web Audio API实现，提前将两个音频解码为内存中的AudioBuffer，通过音频上下文的精确时间调度能力实现无缝衔接。

完整代码示例 #

// 注意：AudioContext需要在用户交互事件（如点击、触摸）中初始化，符合浏览器自动播放政策
let audioContext;
let whiteNoiseBuffer, pinkNoiseBuffer;
let currentSource;
let nextPlayTime = 0;

// base64转ArrayBuffer工具函数
function base64ToArrayBuffer(base64) {
    const binaryString = atob(base64);
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}

// 预加载并解码音频
async function loadAudio(base64Str) {
    const arrayBuffer = base64ToArrayBuffer(base64Str.split(',')[1]);
    return await audioContext.decodeAudioData(arrayBuffer);
}

// 无缝循环播放逻辑
function playLoop() {
    // 交替播放两个音频
    const buffer = currentSource?.buffer === whiteNoiseBuffer ? pinkNoiseBuffer : whiteNoiseBuffer;
    const source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    
    // 精确调度播放时间：如果是首次播放就立即开始，否则在上一段结束的时间点开始
    const playTime = nextPlayTime || audioContext.currentTime;
    source.start(playTime);
    
    // 提前计算下一段的播放时间，等于当前段开始时间+当前段时长
    nextPlayTime = playTime + buffer.duration;
    
    // 当前段播放结束前就调度下一段，避免异步回调延迟
    source.onended = playLoop;
    currentSource = source;
}

// 初始化触发（需要绑定到用户交互事件，比如页面按钮点击）
async function initPlay() {
    if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        // 替换为实际的base64音频内容
        const whiteNoiseBase64 = "data:audio/wav;base64, {{此处填入白噪声的BASE64编码Wav文件内容}}";
        const pinkNoiseBase64 = "data:audio/wav;base64, {{此处填入粉噪声的BASE64编码Wav文件内容}}";
        whiteNoiseBuffer = await loadAudio(whiteNoiseBase64);
        pinkNoiseBuffer = await loadAudio(pinkNoiseBase64);
    }
    // 恢复可能被暂停的音频上下文
    if (audioContext.state === 'suspended') {
        await audioContext.resume();
    }
    playLoop();
}

// 示例：绑定到页面按钮点击事件
// document.querySelector('#playBtn').addEventListener('click', initPlay);

折衷方案（不替换Audio元素） #

如果不想重构为Web Audio，可以通过提前调度播放降低间隙：

• 给两个Audio元素设置preload = "auto"确保音频完全预加载
• 不监听onended事件，改为用定时器在上一段音频结束前30~50ms调用下一段的play()方法
• 该方案精度较低，可能出现轻微重叠或者仍有小间隙，仅适合要求不高的场景

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