Web Audio API使用navigator.getUserMedia返回错误设备的MediaStream问题

嘿，我一眼就看出你踩了API用途的坑——navigator.mediaDevices.getUserMedia() 是专门用来获取输入设备（比如麦克风）的媒体流的，和音频输出设备完全不搭边！这就是为什么你拿到的总是MacBook麦克风的流，和你选的输出设备根本没关系。

我给你梳理下正确的实现思路，再把代码改好：

• 你用 enumerateDevices() 枚举音频输出设备的步骤是对的，继续保留
• 不需要用 getUserMedia 去拿流，应该用 AudioContext.setSinkId() 方法直接指定输出设备ID
• MediaStreamDestinationNode 是用来把Web Audio的信号转成可分享的MediaStream（比如直播推流用），不是用来指定播放设备的，这里完全用不上

修正后的完整代码 #

HTML部分

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

JavaScript部分

$(document).ready(function() {
  // 枚举音频输出设备，填充下拉菜单
  navigator.mediaDevices.enumerateDevices().then((devices) => {
    devices.forEach((device) => {
      if (device.kind !== "audiooutput") return;
      $("<option>")
        .text(device.label)
        .val(device.deviceId)
        .appendTo($("#audioout"));
    });
  });

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

    try {
      // 创建AudioContext实例
      const audioContext = new AudioContext();
      // 核心操作：设置音频输出为选中的设备
      await audioContext.setSinkId(selectedDeviceId);
      console.log("已切换到目标输出设备:", selectedDeviceId);

      // 创建正弦波振荡器
      const oscillatorNode = audioContext.createOscillator();
      oscillatorNode.type = "sine";
      oscillatorNode.frequency.setValueAtTime(1750, audioContext.currentTime);
      
      // 连接到音频上下文的输出目标（已指定为选中设备）
      oscillatorNode.connect(audioContext.destination);
      
      // 启动播放，5秒后自动停止（可根据需求调整时长）
      oscillatorNode.start();
      oscillatorNode.stop(audioContext.currentTime + 5);
    } catch (error) {
      console.error("设置输出设备或播放音频失败:", error);
    }
  });
});

关键修改说明 #

1. 移除无用的getUserMedia调用：彻底抛弃用输入流指定输出设备的错误思路
2. 用setSinkId指定输出设备：这是Web Audio API官方提供的设置输出设备的方法，异步操作要记得用async/await处理
3. 简化音频链路：振荡器直接连到audioContext.destination就好，这个目标已经被我们绑定到选中的输出设备
4. 添加基础校验和错误处理：避免未选设备就触发操作，同时捕获权限或设备不兼容的异常

另外要注意，Chrome浏览器要求音频上下文必须通过用户交互（比如点击按钮）激活，你的按钮触发逻辑刚好符合这个安全策略，没问题。

备注：内容来源于stack exchange，提问作者Skynet