Web Speech API：如何用sinkId为TTS播放设置自定义音频输出设备

问题根源 #

你当前的代码里，speechSynthesis.speak() 是直接将音频输出到系统默认设备，和你设置了sinkId的audio元素没有任何关联——相当于你只是创建了一个audio元素并配置了输出设备，但根本没让TTS的音频流走这个通道，所以sinkId完全没生效。

解决方案 #

要让TTS音频通过指定设备播放，需要将SpeechSynthesisUtterance的输出路由到AudioContext，再通过MediaStreamDestination连接到设置了sinkId的audio元素，核心步骤如下：

• 确保AudioContext在用户交互（比如点击播放）时激活（浏览器自动播放政策限制，不能静默初始化）
• 创建MediaStreamDestination作为音频输出节点
• 将TTS的输出定向到这个节点
• 把节点的媒体流赋值给audio元素的srcObject，并设置sinkId
• 最后通过audio元素播放音频

修改后的完整代码 #

import { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";

const UseTTS = () => {
    const [isSpeaking, setSpeaking] = useState(false);
    const audioContextRef = useRef(null);
    const audioElementRef = useRef(null);
    const utteranceRef = useRef(null);
    const mediaDestinationRef = useRef(null);

    const { selectedSpeakerSrc } = useSelector(state => state.setup);

    useEffect(() => {
        // 初始化audio元素
        if (!audioElementRef.current) {
            audioElementRef.current = new Audio();
            // 监听音频结束事件
            audioElementRef.current.onended = handleSpeechEnd;
        }
    }, []);

    const handlePlay = async () => {
        const ttsText = "Hello, this is a test message!";
        
        // 激活AudioContext（必须在用户交互中触发）
        if (!audioContextRef.current) {
            audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
        } else if (audioContextRef.current.state === "suspended") {
            await audioContextRef.current.resume();
        }

        // 创建媒体流输出节点
        if (!mediaDestinationRef.current) {
            mediaDestinationRef.current = audioContextRef.current.createMediaStreamDestination();
        }

        // 创建并配置TTS utterance
        utteranceRef.current = new SpeechSynthesisUtterance(ttsText);
        utteranceRef.current.lang = 'en-US';
        // 将TTS输出定向到MediaStreamDestination（仅Chrome支持，其他浏览器需polyfill）
        utteranceRef.current.audioDestination = mediaDestinationRef.current;
        utteranceRef.current.voice = speechSynthesis.getVoices()[0];

        try {
            // 设置音频输出设备
            if (audioElementRef.current.setSinkId && selectedSpeakerSrc) {
                await audioElementRef.current.setSinkId(selectedSpeakerSrc);
            }
            // 将媒体流绑定到audio元素
            audioElementRef.current.srcObject = mediaDestinationRef.current.stream;
            // 播放音频
            await audioElementRef.current.play();
            // 启动TTS合成
            speechSynthesis.speak(utteranceRef.current);
            setSpeaking(true);
        } catch (error) {
            console.error(`播放失败: ${error}`);
            setSpeaking(false);
        }
    };

    const handleSpeechEnd = () => {
        setSpeaking(false);
        // 清理资源
        if (utteranceRef.current) {
            speechSynthesis.cancel();
            utteranceRef.current = null;
        }
        if (audioElementRef.current) {
            audioElementRef.current.srcObject = null;
        }
    };

    return {
        isSpeaking,
        handlePlay,
    };
};

export default UseTTS;

注意事项 #

• utterance.audioDestination 是Chrome浏览器特有的API，Firefox等其他浏览器目前不支持。如果需要跨浏览器兼容，可采用将TTS音频录制为Blob再播放的方案，或使用Web Speech API的polyfill。
• 必须确保AudioContext的激活是在用户交互（如点击按钮）中触发，否则会被浏览器的自动播放政策阻止。
• 确认selectedSpeakerSrc是有效的设备ID，可通过navigator.mediaDevices.enumerateDevices()获取所有音频输出设备的ID。

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