Web Audio API中使用navigator.getUserMedia获取指定音频输出设备流时返回错误设备的问题

你遇到的核心问题是混淆了媒体输入和输出API的用途：navigator.mediaDevices.getUserMedia()是专门用来获取**输入设备（比如麦克风、摄像头）**的媒体流，哪怕你指定了音频输出设备的deviceId，它也只会返回输入设备的流——这就是为什么你拿到的始终是麦克风音轨，根本没法用它来播放音频到扬声器。

正确的实现思路 #

要将Web Audio的输出定向到指定的音频设备，不需要借助getUserMedia，而是直接使用AudioContext的setSinkId()方法，它专门用来设置音频输出设备。具体步骤调整如下：

• 保持第一步：枚举音频输出设备并填充下拉框（这部分你的代码是对的）
• 点击"运行"时：
  1. 获取选中设备的deviceId
  2. 创建AudioContext实例（必须在用户交互中触发，符合浏览器自动播放政策）
  3. 调用audioContext.setSinkId(deviceId)将输出定向到选中设备
  4. 创建振荡器节点，配置参数后连接到AudioContext的destination（这是默认的输出节点，现在已经绑定到你指定的设备了）
  5. 启动振荡器播放，按需设置自动停止逻辑

修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
Select audio device: <select id="audioout"></select><br />
<button id="run">Play 1750 Hz</button>

<script>
$(document).ready(function() { 
    // 枚举音频输出设备填充下拉框
    navigator.mediaDevices.enumerateDevices().then((devices) => { 
        devices.forEach((device) => { 
            if (device.kind !== "audiooutput") return; 
            $("<option>")
                .text(device.label || `Audio Output ${device.deviceId.slice(0, 8)}`)
                .val(device.deviceId)
                .appendTo($("#audioout")); 
        }); 
    }); 

    $("#run").click(async function() { 
        const selectedDeviceId = $("#audioout").val();
        if (!selectedDeviceId) {
            alert("请先选择一个音频输出设备");
            return;
        }

        try {
            // 创建AudioContext（用户交互触发，规避自动播放限制）
            const audioContext = new AudioContext();
            // 将输出定向到选中的设备
            await audioContext.setSinkId(selectedDeviceId);
            console.log(`已将音频输出设置为: ${$("#audioout option:selected").text()}`);

            // 创建并配置振荡器节点
            const oscillatorNode = audioContext.createOscillator();
            oscillatorNode.type = "sine";
            oscillatorNode.frequency.setValueAtTime(1750, audioContext.currentTime);

            // 连接到输出目标（已绑定指定设备）
            oscillatorNode.connect(audioContext.destination);

            // 启动播放，2秒后自动停止（可按需调整时长）
            oscillatorNode.start();
            oscillatorNode.stop(audioContext.currentTime + 2);
        } catch (err) {
            console.error("播放失败:", err);
            alert(`播放出错：${err.message}`);
        }
    }); 
}); 
</script>

关键细节说明 #

1. setSinkId()兼容性：这个方法在Chrome 94+、Firefox 103+等现代浏览器中支持，你的Chrome 145版本完全适配。
2. 自动播放政策：浏览器会阻止未在用户交互中触发的音频播放，所以必须把AudioContext的创建逻辑放在点击事件内。
3. 权限问题：Chrome可能会要求网站拥有"扬声器"权限，你可以通过地址栏的权限图标确认是否授予。
4. 自动停止逻辑：我添加了2秒自动停止的代码，避免持续播放正弦音，你可以根据需求修改时长或移除该逻辑。

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