如何在JavaScript中连续播放音频片段实现无间隙流式播放？

你的问题核心在于每次收到音频片段就重置Audio元素的src并播放，这会导致浏览器重复解析资源、启动播放的延迟，加上没有缓冲队列处理网络波动，自然出现播放间隙。下面是具体的解决方案：

问题根源拆解 #

• 普通Audio元素无法无缝拼接音频片段，每次设置src都会中断当前播放并重新初始化
• 未实现音频缓冲队列，网络延迟或片段到达顺序波动会直接导致播放断档
• MediaRecorder的stop()/start()循环会产生录制间隙，因为停止和重启录制本身有时间差

最佳解决方案：用AudioContext实现缓冲队列播放 #

改用Web Audio API的AudioContext来处理音频，它能精确控制音频的解码、缓冲和无缝播放，配合队列管理实现连续流播放。

修改后的前端代码 #

const ws = new WebSocket('ws://localhost:8001');
// 初始化AudioContext，注意浏览器自动播放策略，可能需要用户交互触发
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 音频缓冲队列
const audioQueue = [];
// 标记是否正在播放
let isPlaying = false;

ws.onopen = () => {
    console.log('opened');
    navigator.mediaDevices.getUserMedia({audio: true, video: false})
    .then(audioStream => {
        const mr = new MediaRecorder(audioStream);
        // 调整录制的MIME类型，确保兼容性和连续性
        mr.mimeType = 'audio/webm;codecs=opus';
        mr.ondataavailable = async (event) => {
            if (event.data.size > 0) {
                ws.send(event.data);
            }
        };
        // 优化录制逻辑：用start(1000)来定期生成片段，避免stop/start的间隙
        mr.start(1000);
    });
};

// 处理收到的音频片段，解码后加入队列
ws.onmessage = async (event) => {
    try {
        // 将Blob转为ArrayBuffer
        const arrayBuffer = await event.data.arrayBuffer();
        // 解码音频为AudioBuffer
        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
        audioQueue.push(audioBuffer);
        // 如果当前没有播放，启动播放队列
        if (!isPlaying) {
            playQueue();
        }
    } catch (err) {
        console.error('音频解码失败:', err);
    }
};

// 播放队列逻辑：当前片段播放结束后自动播放下一段
function playQueue() {
    if (audioQueue.length === 0) {
        isPlaying = false;
        return;
    }
    isPlaying = true;
    const buffer = audioQueue.shift();
    const source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    // 当前片段播放结束后，继续播放队列中的下一段
    source.onended = () => {
        playQueue();
    };
    source.start();
}

ws.onclose = (event) => {
    console.log(`closed with code ${event.code}`);
};

ws.onerror = () => {
    console.log('error');
};

关键优化点说明 #

1. 用AudioContext替代Audio元素：Web Audio API提供了更低层级的音频控制，能实现无缝拼接
2. 音频缓冲队列：将解码后的音频片段存入队列，确保播放的连续性，即使网络有延迟也不会断档
3. 优化录制逻辑：使用mr.start(1000)让MediaRecorder每1秒自动生成一个片段，避免stop()/start()循环带来的录制间隙
4. 自动衔接播放：通过source.onended事件，当前一段音频播放完毕后立即启动下一段，实现无间隙播放

后端代码无需修改 #

你的Python后端只是echo音频片段，逻辑没问题，保持原代码即可。

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