在 React 中添加文字转语音

文字转语音正迅速成为现代网页的必备功能。无论你是为了无障碍、提升用户参与度，还是只想给用户多一种获取内容的方式，为 React 项目添加语音都比你想象的更简单。本指南将介绍浏览器语音合成的工作原理、不同方案的利弊权衡，并一步步教你把 TTS2Go 集成到 React 应用中。

每个现代浏览器都内置了 Web Speech API。你可以调用 window.speechSynthesis.speak() 并传入一个 SpeechSynthesisUtterance，无需任何外部服务就能让文本被朗读出来。它免费、不需要 API 密钥，并且完全在客户端运行。

问题在于音质。浏览器自带的声音听起来很机械，在不同操作系统和浏览器之间表现不一，可选音色也很有限。同一段文本在不同设备上听起来可能截然不同。

AI 驱动的文字转语音改变了游戏规则。神经网络语音模型生成的音频听起来非常接近真人，语调、节奏和情感都很自然。这些服务支持数十种语言和数百种音色。

代价是生成这类音频需要花钱，还需要调用 API，这就引出了一个重要问题：应该在什么时候、以什么方式生成？

一种方案是提前生成所有音频，并以静态文件的形式提供。好处是音频已经在 CDN 上，可以即时播放，而且每次音质都一致。

缺点是成本。无论有没有人收听，你都要为每一篇内容支付音频生成费用。你必须提前掌握所有内容，这就排除了动态文本。每次内容变更都会触发新一轮生成流程，存储成本也会随内容库增长而增加。

另一种方案是只在用户请求时才生成音频。这样更省钱，因为你只为大家真正想听的内容付费，而且也适用于动态内容。

不过，你仍然需要保护生成预算。如果不加限制地开放 TTS API，任何人都可能触发昂贵的生成操作。你需要一种方式来控制谁能听到 AI 音频、何时能听到。

TTS2Go 采用了一种巧妙的方案，在音质、成本和简洁性之间取得平衡。

你使用前端 API key 将 SDK 添加到网站中。该 API key 通过请求域名拦截和速率限制机制，可以安全地放在客户端代码里。它是一种身份识别机制，而不是机密信息。

当第一位访客点击某段内容上的 TTS 按钮时，会立即听到浏览器语音合成的朗读。与此同时，一个生成请求会在后台发送到 TTS2Go。

你可以登录 TTS2Go 控制台手动审批该请求，也可以配置 AI 审批系统，自动批准符合你设定条件的请求。这让你能完全掌控生成预算，因为你只为真正需要的音频付费。

请求获批并生成完成后，之后每一位在同一内容上点击 TTS 的用户，都能听到由你选定音色朗读的高品质 AI 音频。音频缓存在 TTS2Go 的 CDN 上，因此可以即时播放。

也就是说，首位访客通过浏览器 TTS 获得可用的体验，生成成本通过审批得到控制，而之后的每个人都能免费享受高品质 AI 音频，不产生额外费用。

在项目目录中安装 TTS2Go React 包：

npm install @tts2go/react

这个包非常轻量，gzip 压缩后不到 15 KB，除 React 外没有任何 peer 依赖。

在组件树的根部用 TTS2GoProvider 包裹你的应用，并将 API key 和项目 ID 作为 config 传入。

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

在任意组件中使用 useTTS hook，即可获得播放、暂停和停止控制。你也可以直接放入预置的 TTSButton，快速添加一个扬声器图标。

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

第一位点击播放的用户会听到浏览器 TTS，同时一个生成请求会发送到你的 TTS2Go 控制台。审批通过后，之后的所有用户都会听到 AI 音频。

你可以继续探索音色选择、用于精细调整发音的 SSML 支持，以及能让屏幕文字与朗读内容同步高亮的 highlight API。

更多进阶用法和示例，请查看完整的 React 文档：tts2go.com/docs/react。