iOS Safari调用getUserMedia开启麦克风录音时音频输出自动切换至扬声器的问题求助

阿华AIGC实验室

2026-4-14

大家好，我碰到一个挺头疼的iOS端音频问题，想请教下各位有没有解决方案！

我们的应用有个对话功能：用户对着麦克风和AI机器人说话，机器人通过音频回复。在单设备（不用耳机）的情况下一切正常，但只要用户使用带麦克风的有线/蓝牙耳机（比如AirPods），就会出现以下异常：

录音开始前：音频播放完全正常，声音从耳机输出
点击录音按钮并授予麦克风权限后：音频输出会自动切换到设备的扬声器，哪怕耳机全程都是连接状态

为了排查问题，我写了一个极简的复现页面，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microphone Recorder</title>
</head>
<body>
    <h1>Microphone Recorder</h1>
    <button id="startBtn">Start Recording</button>
    <button id="stopBtn" disabled>Stop Recording</button>
       <audio id="audioPlayback" controls src="https://cdn.jsdelivr.net/npm/sample-audio-files@1.0.7/media/Justice_Genesis_16bit_trim_mono_y6iHYTjEyKU.wav" playsinline></audio>


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

        document.getElementById('startBtn').addEventListener('click', async () => {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                audioChunks = [];

                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;
                };

                mediaRecorder.start();
                document.getElementById('startBtn').disabled = true;
                document.getElementById('stopBtn').disabled = false;
            } catch (error) {
                console.error('Error accessing microphone:', error);
            }
        });

        document.getElementById('stopBtn').addEventListener('click', () => {
            mediaRecorder.stop();
            document.getElementById('startBtn').disabled = false;
            document.getElementById('stopBtn').disabled = true;
        });
    </script>
</body>
</html>

复现步骤非常简单：