开发浏览器低延迟采样器：如何在Chrome/Firefox选特定音频输出设备

一、解决Chrome 109中selectAudioOutput未定义的问题 #

Chrome 109版本中，Audio Output API仍处于实验性阶段，默认未启用，需手动开启：

• 打开Chrome，输入chrome://flags
• 搜索#enable-experimental-web-platform-features，设置为Enabled
• 重启Chrome

同时必须满足两个前提：

• 站点运行在HTTPS环境（本地开发的localhost/127.0.0.1不受限制）
• 所有设备操作必须通过用户交互触发（比如点击按钮）——浏览器禁止无交互的自动设备选择

二、获取并选择特定音频输出设备（以Asio4All为例） #

1. 先请求音频访问权限 #

权限必须通过用户交互触发，可通过临时获取音频流完成权限申请：

async function requestAudioPermission() {
  try {
    const tempStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // 临时流仅用于获取权限，获取后立即关闭
    tempStream.getTracks().forEach(track => track.stop());
  } catch (err) {
    console.error("音频权限获取失败:", err);
  }
}

2. 枚举所有可用音频输出设备 #

权限获取后，即可筛选出所有输出设备：

async function getAudioOutputDevices() {
  const allDevices = await navigator.mediaDevices.enumerateDevices();
  return allDevices.filter(device => device.kind === "audiooutput");
}

3. 选择目标设备 #

方式一：自动匹配Asio4All设备

适合无需用户手动选择的场景，通过设备名称筛选：

async function switchToAsio4All() {
  const devices = await getAudioOutputDevices();
  const asioDevice = devices.find(device => device.label.includes("Asio4All"));
  
  if (!asioDevice) {
    console.error("未找到Asio4All设备，请确认驱动已安装并启用");
    return;
  }

  // 创建低延迟AudioContext
  const audioContext = new AudioContext({
    latencyHint: 'interactive', // 优先低延迟配置，适合实时采样
    sampleRate: 44100 // 可根据Asio4All配置调整，常见44.1k/48k
  });

  // 将AudioContext绑定到目标设备
  await audioContext.setSinkId(asioDevice.deviceId);
  
  console.log(`已切换至低延迟输出设备：${asioDevice.label}`);
  return audioContext;
}

方式二：让用户手动选择设备

使用selectAudioOutput弹出系统设备选择框，通用性更强：

async function promptDeviceSelection() {
  try {
    const selectedDevice = await navigator.mediaDevices.selectAudioOutput({
      label: "选择低延迟音频输出设备"
    });
    
    const audioContext = new AudioContext({ latencyHint: 'interactive' });
    await audioContext.setSinkId(selectedDevice.deviceId);
    
    console.log(`已切换至用户选择的设备：${selectedDevice.label}`);
    return audioContext;
  } catch (err) {
    console.error("设备选择失败:", err);
  }
}

4. 低延迟采样器额外优化 #

• 优先使用AudioWorklet替代ScriptProcessorNode，可将WASM逻辑集成到AudioWorklet中进一步降低延迟
• 配置Asio4All驱动时，尽量缩小缓冲区大小（比如64/128采样点），可将延迟压至5ms左右
• 避免在音频处理线程中执行耗时操作，所有非实时逻辑放在主线程完成

三、Firefox的适配说明 #

Firefox从93版本开始默认支持Audio Output API，无需开启实验性标志，代码逻辑与Chrome完全兼容，仅需保证HTTPS/localhost环境及用户交互触发两个前提。

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