Web 开发文字转语音

在 JavaScript 中添加文字转语音

了解浏览器语音合成的工作原理及其利弊权衡，以及如何在任意 JavaScript 项目中集成 TTS2Go，实现高品质的 AI 文字转语音。

Anthony Morris·
在 JavaScript 中添加文字转语音

无需任何框架，你就能为网站添加文字转语音（TTS）功能。无论你用的是纯 HTML 和 JavaScript、静态站点生成器，还是服务端渲染页面，为内容加上语音都很简单。

本指南将介绍浏览器语音合成的工作原理、不同方案的利弊权衡，以及如何在任意 JavaScript 项目中集成 TTS2Go。

浏览器语音合成的工作原理

现代浏览器内置了 Web Speech API。只需几行原生 JavaScript，你就可以：

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

无需 npm 包，无需 API 密钥，也无需服务器。它完全免费，而且可以离线使用。

缺点在于音质和一致性：

  • 声音往往听起来很机械。
  • 不同平台的音质和可选音色各不相同。
  • Windows 上的 Chrome 和 macOS 上的 Safari 听起来不一样。
  • 你无法保证所有用户都获得一致的收听体验。

AI 生成语音的兴起

AI 文字转语音彻底改变了网页语音的可能性。神经网络语音模型生成的音频听起来与真人无异，停顿、重音和节奏都十分自然。

预先生成音频

一种方案是为所有内容预先生成音频，并将文件托管在 CDN 上。

优点

  • 用户可以即时播放
  • 各处的音质和音色完全一致

缺点

  • 无论内容是否有人播放，你都要预先为每一篇内容支付音频生成费用
  • 必须提前知道内容
  • 内容更新后需要重新生成文件
  • 存储成本随内容库增长而增加

预先生成适合规模小、内容稳定的内容库，但规模一大就会变得昂贵且缺乏灵活性。

按需延迟生成

更高效的方式是只在有人真正点击播放时才生成音频。

优势

  • 只为用户实际请求的音频付费
  • 能自然地处理动态内容和用户生成内容

挑战

如果没有任何把关机制，任何访问你网站的人都可能触发昂贵的生成操作。你需要一种方式来决定生成什么、何时生成，这样既能控制预算，又能在各处提供 TTS。

TTS2Go 如何解决这个问题

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

  1. 安全的客户端密钥

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

  1. 首位访客：即时浏览器 TTS + 后台生成

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

  1. 审批与预算控制

在 TTS2Go 控制台中，你可以：

  • 手动审批生成请求，或者
  • 配置 AI 审批系统，自动批准符合你设定条件的请求。

这让你能完全掌控生成预算。

  1. 后续访客：来自 CDN 的高品质 AI 音频

请求获批并生成完成后，之后每一位在同一内容上点击 TTS 的用户，都会听到由你选定音色朗读的高品质 AI 音频，并从 TTS2Go 的 CDN 即时分发。

实际效果是：首位访客听到浏览器 TTS，成本通过审批得到控制，之后的每个人都能享受高品质 AI 音频。

第 1 步：安装 SDK

使用 npm 安装 TTS2Go 原生 JavaScript 包：


npm install @tts2go/vanilla

如果你没有使用打包工具，也可以通过 CDN 用 <script> 标签加载，并通过 window.TTS2Go 访问。

第 2 步：创建客户端

使用你的项目凭据初始化一个新的 TTS2Go 实例：


import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

第 3 步：添加文字转语音

调用 tts.create() 并传入文本和音色 ID，即可获得一个带有完整播放控制的 TTS 实例：


const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

接下来，你可以进一步探索完整的 TTS2Go JavaScript API，包括：

  • tts.getVoices() —— 列出项目可用的音色
返回全部文章