如何指定语音合成的音频输出设备？

原生Web Speech Synthesis API的局限 #

原生的SpeechSynthesis和SpeechSynthesisUtterance接口不支持直接指定音频输出设备，默认会使用系统的默认音频输出设备，没有提供相关属性或方法修改这一行为。

借助Chrome扩展实现指定输出设备 #

通过Chrome扩展结合Web Audio API，可以实现将语音合成的音频路由到指定输出设备，具体步骤如下：

1. 获取可用音频输出设备 #

使用navigator.mediaDevices.enumerateDevices()筛选出所有音频输出设备：

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

2. 创建绑定指定设备的AudioContext #

通过AudioContext构造参数sinkId指定目标输出设备：

async function createTargetAudioContext(deviceId) {
  return new AudioContext({ sinkId: deviceId });
}

3. 路由语音合成输出到指定设备 #

将语音合成的输出通过隐藏的<audio>元素捕获，再连接到目标AudioContext：

async function speakToDevice(text, deviceId) {
  // 初始化目标设备的AudioContext
  const audioCtx = await createTargetAudioContext(deviceId);
  
  // 创建隐藏audio元素用于中转语音合成输出
  const audioEl = document.createElement('audio');
  audioEl.hidden = true;
  document.body.appendChild(audioEl);

  // 创建语音合成实例
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = 'en';

  // 合成结束后清理资源
  utterance.onend = () => {
    audioEl.remove();
    audioCtx.close();
  };

  // 启动语音合成并绑定到audio元素
  utterance.voice = speechSynthesis.getVoices()[0];
  speechSynthesis.speak(utterance);
  
  // 将音频流路由到指定设备
  const source = audioCtx.createMediaElementSource(audioEl);
  source.connect(audioCtx.destination);
}

4. 扩展权限配置 #

在Chrome扩展的manifest.json中添加必要权限：

{
  "manifest_version": 3,
  "name": "语音合成定向输出",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  }
}

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