Web应用WebRTC+Socket.IO实时音频播放卡顿问题排查与解决

你的音频播放卡顿、断续主要是用户端播放逻辑缺陷、MP3编码处理不严谨和缓冲区管理缺失导致的，以下是针对性的修复方案：

核心问题拆解 #

• 用户端播放逻辑错误：当前仅在播放器暂停时才合并播放，导致音频片段之间出现明显间隙；每次重新设置src会触发浏览器重新解析音频，进一步加剧卡顿。
• MP3编码不完整：lamejs编码后未添加结束标记，导致生成的MP3片段存在格式问题，播放时出现破音或中断。
• MediaRecorder的WAV头未处理：直接读取MediaRecorder输出的WAV数据包含文件头，转PCM时未跳过，导致编码后的音频有杂音或格式错误。
• 无缓冲队列机制：用户端没有维护足够的音频缓冲区，网络波动时直接断流。

具体修复步骤 #

1. 管理员端：修正MP3编码与数据传输 #

• 跳过WAV文件头（前44字节），只处理纯PCM数据
• 编码完成后添加MP3结束标记，保证片段格式完整
• 调整录制chunk大小为200ms，降低传输延迟
• 优化Socket.IO传输，使用二进制模式减少序列化开销

修改后的管理员端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Broadcasting</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lamejs/1.2.0/lame.min.js"></script>
</head>
<body>
    <h1>Admin Broadcasting</h1>
    <button id="startBroadcastBtn">Start Broadcasting</button>
    
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const startBroadcastBtn = document.getElementById('startBroadcastBtn');
        const socket = io('ws://localhost:9000', {
            transports: ['websocket'], // 强制使用WebSocket，避免轮询延迟
            binaryType: 'arraybuffer'
        });
        let mediaRecorder;
        let mp3Encoder;

        startBroadcastBtn.addEventListener('click', async () => {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ 
                    audio: {
                        sampleRate: 44100,
                        channelCount: 1,
                        echoCancellation: true // 开启回声消除提升音质
                    } 
                });
                if (!stream) {
                    console.error('getUserMedia failed to return a valid stream');
                    return;
                }

                // 初始化MediaRecorder，指定MIME类型为WAV
                mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
                mp3Encoder = new lamejs.Mp3Encoder(1, 44100, 128);

                mediaRecorder.ondataavailable = async (event) => {
                    try {
                        if (event.data.size > 44) { // 跳过WAV文件头（44字节）
                            const reader = new FileReader();
                            reader.onload = () => {
                                const arrayBuffer = reader.result;
                                // 跳过WAV头，读取纯PCM数据
                                const pcmBuffer = new Int16Array(arrayBuffer, 44);
                                const mp3Data = mp3Encoder.encodeBuffer(pcmBuffer);
                                
                                if (mp3Data.length > 0) {
                                    socket.emit('admin-audio-chunk', mp3Data);
                                }
                            };
                            reader.readAsArrayBuffer(event.data);
                        }
                    } catch (error) {
                        console.error('Error processing audio data:', error);
                    }
                };

                // 每200ms生成一个chunk，降低延迟
                mediaRecorder.start(200);
                console.log('Recording started.');

                // 停止录制时添加MP3结束标记
                mediaRecorder.onstop = () => {
                    const endData = mp3Encoder.flush();
                    if (endData.length > 0) {
                        socket.emit('admin-audio-chunk', endData);
                    }
                };
            } catch (error) {
                console.error('Error accessing media devices:', error);
            }
        });
    </script>
</body>
</html>

2. 用户端：实现音频缓冲队列与流式播放 #

• 使用MediaSource API实现流式播放，避免频繁设置src
• 维护音频缓冲区，积累足够数据后再播放，防止网络波动导致卡顿
• 处理MP3片段的拼接，保证音频连续性

修改后的用户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Listening</title>
</head>
<body>
    <h1>User Listening</h1>
    <audio id="audioPlayer" controls preload="auto"></audio>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const audioPlayer = document.getElementById('audioPlayer');
        const socket = io('ws://localhost:9000', {
            transports: ['websocket'],
            binaryType: 'arraybuffer'
        });
        
        let mediaSource;
        let sourceBuffer;
        let bufferQueue = [];
        let isSourceOpen = false;

        // 初始化MediaSource
        function initMediaSource() {
            mediaSource = new MediaSource();
            audioPlayer.src = URL.createObjectURL(mediaSource);
            
            mediaSource.addEventListener('sourceopen', () => {
                isSourceOpen = true;
                // 创建MP3类型的SourceBuffer
                sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg; codecs="mp3"');
                
                sourceBuffer.addEventListener('updateend', () => {
                    // 缓冲区空闲时，继续添加队列中的数据
                    if (bufferQueue.length > 0 && !sourceBuffer.updating) {
                        const chunk = bufferQueue.shift();
                        sourceBuffer.appendBuffer(chunk);
                    }
                });
                
                // 开始播放
                audioPlayer.play().catch(error => {
                    console.error('Error playing audio:', error);
                });
            });
        }

        socket.on('user-audio-chunk', (data) => {
            if (!isSourceOpen) {
                initMediaSource();
            }
            
            // 如果SourceBuffer正在更新，先加入队列
            if (sourceBuffer && sourceBuffer.updating) {
                bufferQueue.push(data);
            } else if (sourceBuffer) {
                try {
                    sourceBuffer.appendBuffer(data);
                } catch (error) {
                    console.error('Error appending buffer:', error);
                    bufferQueue.push(data);
                }
            } else {
                bufferQueue.push(data);
            }
        });

        // 监听音频播放状态，自动恢复播放
        audioPlayer.addEventListener('pause', () => {
            if (!audioPlayer.ended && isSourceOpen) {
                audioPlayer.play().catch(error => {
                    console.error('Error resuming audio:', error);
                });
            }
        });
    </script>
</body>
</html>

3. 服务端：优化Socket.IO配置 #

确保你的Socket.IO服务端开启二进制支持，并优化传输参数：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
    cors: {
        origin: "*", // 根据实际业务调整允许的源
        methods: ["GET", "POST"]
    },
    allowEIO3: true,
    transports: ['websocket'],
    maxHttpBufferSize: 1e6 // 增大缓冲区，避免大chunk被截断
});

io.on('connection', (socket) => {
    console.log('a user connected');
    
    socket.on('admin-audio-chunk', (chunk) => {
        // 广播给所有非管理员客户端（可根据实际业务调整过滤规则）
        socket.broadcast.emit('user-audio-chunk', chunk);
    });
    
    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
});

server.listen(9000, () => {
    console.log('listening on *:9000');
});

额外优化建议 #

• 管理员端开启音频降噪、回声消除，提升原始音频质量
• 用户端添加缓冲区状态监控，当缓冲区过小时暂停播放，积累足够数据后恢复
• 使用更低的比特率（如64kbps）减少传输数据量，适合弱网环境

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