Windows 11下Microsoft Edge中setSinkId功能失效问题求助

我正在开发一款Web应用，需要使用setSinkId为音频分配不同的输出设备，但在Windows 11的Microsoft Edge浏览器中遇到问题：无论选择哪个设备，音频始终从系统默认扬声器输出。

代码片段 #

btn.onclick = async (evt) => {
  // request device access the bad way,
  // until we get a proper mediaDevices.selectAudioOutput
  (await navigator.mediaDevices.getUserMedia({audio:true}))
      .getTracks().forEach(track => track.stop());
  
  const devices = await navigator.mediaDevices.enumerateDevices();
  const audio_outputs = devices.filter( (device) => device.kind === "audiooutput" );
  
  const sel = document.createElement("select");
  audio_outputs.forEach( (device, i) => sel.append(new Option( device.label || `device ${i}`, device.deviceId )) );
  document.body.append(sel);
  
  btn.textContent = "play audio in selected output";
  btn.onclick = (evt) => {
    const aud = new Audio("https://upload.wikimedia.org/wikipedia/en/d/dc/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.ogg");
    aud.setSinkId(sel.value);
    aud.play();
  };
}

复现步骤 #

• 为系统连接外部扬声器
• 运行上述代码
• 选择系统扬声器作为输出设备

问题现象 #

音频通过外部扬声器播放，而非所选的系统扬声器。

环境信息 #

• 浏览器：Microsoft Edge（最新版本）
• 操作系统：Windows 11

疑问解答与解决方案 #

1. 是否有其他人在Windows 11的Edge中遇到过setSinkId此类问题？ #

是的，有不少开发者反馈过Windows 11平台上Edge浏览器中setSinkId的异常行为，主要集中在设备识别和输出路由的匹配问题上，部分情况是Windows的音频会话管理与浏览器的设备映射出现偏差。

2. 是否有已知解决方法，确保音频从所选扬声器播放？ #

可以尝试以下几种修复方案：

方案一：等待setSinkId异步操作完成后再播放

setSinkId返回Promise，直接调用play()可能在设备切换完成前就启动播放，导致音频走默认设备。修改代码如下：

btn.onclick = async (evt) => {
  const aud = new Audio("https://upload.wikimedia.org/wikipedia/en/d/dc/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.ogg");
  try {
    await aud.setSinkId(sel.value);
    await aud.play();
  } catch (err) {
    console.error('切换音频输出失败:', err);
  }
};

方案二：等待音频资源加载完成后操作

借助canplay事件确保音频资源就绪，再执行设备切换和播放：

btn.onclick = (evt) => {
  const aud = new Audio("https://upload.wikimedia.org/wikipedia/en/d/dc/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.ogg");
  aud.addEventListener('canplay', async () => {
    try {
      await aud.setSinkId(sel.value);
      aud.play();
    } catch (err) {
      console.error('切换音频输出失败:', err);
    }
  });
};

方案三：使用官方推荐的selectAudioOutput API

目前主流浏览器已支持selectAudioOutput，这是规范的音频输出设备选择方式，能避免getUserMedia带来的设备识别偏差：

btn.onclick = async (evt) => {
  try {
    const selectedDevice = await navigator.mediaDevices.selectAudioOutput();
    
    const aud = new Audio("https://upload.wikimedia.org/wikipedia/en/d/dc/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.ogg");
    await aud.setSinkId(selectedDevice.deviceId);
    await aud.play();
  } catch (err) {
    console.error('选择或切换音频输出失败:', err);
  }
};

3. 这是浏览器特定问题还是Windows 11的bug？ #

这属于浏览器与Windows 11音频子系统的兼容性问题：

• Windows 11的音频会话管理机制（如应用音量和设备偏好设置）可能干扰浏览器的设备路由
• Edge浏览器在设备ID映射、异步操作时序处理上存在小范围兼容性问题，部分版本已通过更新修复，但仍有场景出现异常

建议先将Edge浏览器更新到最新版本，再测试上述解决方案。

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