Web 开发文字转语音

在 Svelte 中添加文字转语音

了解如何使用 TTS2Go 为 Svelte 应用添加高性价比、高品质的文字转语音，将浏览器 TTS 兜底与 AI 音频结合起来。

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

Svelte 以简洁和高性能为核心设计理念，而为 Svelte 应用添加文字转语音（TTS）同样可以非常简单。

无论你是想让内容更具无障碍性、打造有声阅读体验，还是添加语音反馈，TTS 都能在几分钟内完成集成。本指南将介绍浏览器语音合成的工作原理、不同 TTS 方案的利弊权衡，以及如何在 Svelte 项目中跑通 TTS2Go。

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

现代浏览器内置了 Web Speech API，你可以调用 window.speechSynthesis.speak() 并传入一个 SpeechSynthesisUtterance，让文本被朗读出来。

主要特点：

  • 零依赖：一切都在浏览器中运行。
  • 无需 API 密钥或服务器调用：不需要任何后端集成。
  • 零成本：使用系统内置的声音。

不过，它也有代价：

  • 音质机械且不稳定：声音往往听起来很“合成”。
  • 依赖平台：Chrome 和 Firefox、macOS 和 Windows 上的声音各不相同。
  • 音色选择有限：与现代 AI TTS 相比，支持的语言和风格更少。

AI 生成语音的兴起

神经网络文字转语音模型能生成听起来很自然的音频，语调和节奏都十分逼真。它们支持多种语言、口音和音色风格，非常适合用于生产级的旁白和语音体验。

利弊权衡：

  • 优点：
  • 高品质、自然的音频
  • 覆盖广泛的语言和音色
  • 在不同设备和浏览器上听感一致
  • 缺点：
  • 成本：按字符数或生成音频的秒数付费。
  • API 调用：需要服务端集成，或经过身份验证的客户端集成。

这就带来了一个设计问题：如何在音质与生成成本之间取得平衡，并控制音频的生成时机？

预先生成音频

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

工作方式：

  • 提前将所有文本内容转换为音频文件。
  • 上传这些文件并通过 CDN 分发。
  • 用户可以即时播放，没有生成延迟。

优点：

  • 每位访客都能即时播放
  • 音频品质高且一致
  • 运行时逻辑简单（只需播放文件）

缺点：

  • 你要为可能永远不会被播放的内容支付生成费用。
  • 必须提前掌握所有内容。
  • 任何内容变更都需要重新生成。
  • 存储和 CDN 成本随内容量增长。

对于动态或频繁更新的内容，这种方式很快就会变得昂贵，运维负担也很重。

按需延迟生成

另一种策略是按需（延迟）生成，即只在用户真正点击播放时才生成音频。

工作方式：

  • 当用户请求某段内容的音频时，调用 TTS API。
  • 将生成的音频缓存或存储起来。
  • 后续请求直接复用缓存的音频。

优点：

  • 性价比高得多：只为用户真正收听的内容付费。
  • 天然支持动态内容和用户生成内容。
  • 减少为无人问津的内容做无用功。

挑战：

  • 如果没有管控，任何人都可能触发昂贵的生成操作。
  • 你需要一种机制来把控哪些内容生成音频、何时生成。
  • 你必须在用户体验（初次延迟）和预算控制之间取得平衡。

TTS2Go 如何解决这个问题

TTS2Go 将浏览器 TTS 与 AI TTS 结合起来，在音质、成本和简洁性之间取得平衡。

核心思路：

  1. 安全的客户端密钥
  • 你使用前端 API key 将 TTS2Go SDK 添加到网站中。

第 1 步：安装 SDK

安装 TTS2Go Svelte 包：


npm install @tts2go/svelte

这个包支持 Svelte 5，并能与 Svelte 的响应式模型自然融合。

第 2 步：创建客户端

使用你的项目凭据初始化一个 TTS2Go 客户端。在 Svelte 中，你可以直接在组件里创建客户端，也可以放在共享模块中。



import { createTTS2GoClient } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});
  • apiKey：你的公开 TTS2Go 密钥，可安全用于前端。
  • projectId：指定用于生成、审批和数据分析的 TTS2Go 项目。

第 3 步：在 Svelte 中添加文字转语音

使用 createTTS 获取一个带有播放控制和状态的响应式 store。



import { createTTS2GoClient, createTTS } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

const VOICE_ID = "your-voice-id";

const text = "Hello from TTS2Go in Svelte!";

const tts = createTTS(client, text, VOICE_ID);

let status = $state("idle");

const unsubscribe = tts.status.subscribe((s) => (status = s));

function handleClick() {

if (status === "playing" || status === "fallback") {

tts.stop();

} else {

tts.play();

}

下一步做什么？

接下来，你可以：

  • 探索音色选择，匹配你的品牌或内容类型。
  • 使用 SSML 精细控制发音、停顿和重音。
  • 集成文本高亮 API，让文字与朗读音频同步。

完整的 Svelte 文档和进阶示例，请访问：

  • https://tts2go.com/docs/svelte
返回全部文章