JavaScript同时播放音频与录音问题：首秒丢失及音质异常

问题描述 #

我正在开发一款JavaScript应用，功能是让用户聆听预录音频并同步跟读，同时录制用户语音。目前遇到两个核心问题：

• 首次执行播放+录音操作时，用户语音的首秒会丢失（比如跟读“one two three four”，仅能捕获到“two three four”），但不刷新页面再次操作则录音正常；
• 录制的音频音质偏低，带有轻微金属感，但单独录制用户语音时一切正常。

原代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Record and Play Sound</title>
</head>
<body>
    <button id="start">Start Recording and Play Sound</button>
    <button id="stop">Stop Recording and Sound</button>
    <audio id="audioPlayback" controls></audio>

    <script>
        let mediaRecorder;
        let audioChunks = [];
        let playAudioContext;
        let source;

        // document.addEventListener('DOMContentLoaded', async () => {
        // });

        document.getElementById('start').addEventListener('click', async () => {

            // Play a sound in a separate audio context
            playAudioContext = new (window.AudioContext || window.webkitAudioContext)();
            const response = await fetch('/mp3'); 
            const arrayBuffer = await response.arrayBuffer();
            const audioBuffer = await playAudioContext.decodeAudioData(arrayBuffer);
            source = playAudioContext.createBufferSource();
            source.buffer = audioBuffer;
            source.connect(playAudioContext.destination);

            // recording
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);

            mediaRecorder.ondataavailable = event => {
                if (event.data.size > 0) {
                    audioChunks.push(event.data);
                }
            };

            mediaRecorder.onstop = () => {
                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                const audioUrl = URL.createObjectURL(audioBlob);
                document.getElementById('audioPlayback').src = audioUrl;
                audioChunks=[];
            };
            mediaRecorder.start(100);

            source.start();

        });

        document.getElementById('stop').addEventListener('click', () => {
            mediaRecorder.stop();
            if (source) {
                source.stop();
            }
            if (playAudioContext) {
                playAudioContext.close();
            }
        });
    </script>
</body>
</html>

问题原因分析 #

首秒录音丢失 #

1. 首次AudioContext初始化延迟：浏览器首次创建AudioContext时，需要完成音频设备初始化、权限验证等操作，这会导致录音启动滞后于音频播放，错过首秒内容；
2. 异步操作顺序混乱：原代码中音频解码、媒体流获取都是异步操作，首次执行时可能音频已经开始播放，录音还没完全就绪。

音质差 #

1. 默认音频参数过低：getUserMedia默认配置的采样率、比特率不高，导致录制音质下降；
2. 多AudioContext冲突：每次点击都创建新的AudioContext，可能引发音频处理逻辑冲突，产生失真。

解决方案及修改后代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Record and Play Sound</title>
</head>
<body>
    <button id="start">Start Recording and Play Sound</button>
    <button id="stop">Stop Recording and Sound</button>
    <audio id="audioPlayback" controls></audio>

    <script>
        let mediaRecorder;
        let audioChunks = [];
        let audioContext; // 复用单个AudioContext
        let source;
        let audioBuffer; // 预加载音频缓存

        // 页面加载时预初始化AudioContext并预加载音频
        document.addEventListener('DOMContentLoaded', async () => {
            // 初始化AudioContext（首次用户交互前处于挂起状态）
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
            // 提前加载并解码音频，避免点击时的延迟
            try {
                const response = await fetch('/mp3'); 
                const arrayBuffer = await response.arrayBuffer();
                audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
            } catch (err) {
                console.error('音频预加载失败:', err);
            }
        });

        document.getElementById('start').addEventListener('click', async () => {
            // 激活挂起的AudioContext
            if (audioContext.state === 'suspended') {
                await audioContext.resume();
            }

            // 1. 先启动录音，确保录音就绪后再播放音频
            const stream = await navigator.mediaDevices.getUserMedia({ 
                audio: {
                    sampleRate: 44100, // 标准CD级采样率
                    channelCount: 1, // 单声道，减少资源占用
                    bitRate: 128000, // 高比特率提升音质
                    echoCancellation: true, // 可选：开启回声消除
                    noiseSuppression: true // 可选：开启降噪
                } 
            });
            // 指定WAV格式录制，避免默认格式的音质损失
            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });

            mediaRecorder.ondataavailable = event => {
                if (event.data.size > 0) {
                    audioChunks.push(event.data);
                }
            };

            mediaRecorder.onstop = () => {
                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                const audioUrl = URL.createObjectURL(audioBlob);
                document.getElementById('audioPlayback').src = audioUrl;
                audioChunks = [];
                // 释放媒体流资源
                stream.getTracks().forEach(track => track.stop());
            };

            // 启动录音，延迟100ms确保录音完全就绪
            mediaRecorder.start();
            await new Promise(resolve => setTimeout(resolve, 100));

            // 2. 播放预加载好的音频
            source = audioContext.createBufferSource();
            source.buffer = audioBuffer;
            source.connect(audioContext.destination);
            source.start();
        });

        document.getElementById('stop').addEventListener('click', () => {
            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                mediaRecorder.stop();
            }
            if (source) {
                try {
                    source.stop();
                } catch (err) {
                    // 忽略已停止的错误
                }
            }
        });
    </script>
</body>
</html>

关键修改说明 #

• 预初始化与预加载：页面加载时就完成AudioContext初始化和音频解码，避免首次点击的延迟；
• 调整操作顺序：先启动录音，延迟100ms后再播放音频，确保录音已完全就绪；
• 高质量音频配置：在getUserMedia中明确设置高采样率、比特率，指定WAV格式录制；
• 资源复用与释放：复用单个AudioContext，录音停止后关闭媒体流，减少资源冲突和浪费。

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