Web 开发文字转语音

在 Vue 中添加文字转语音

了解浏览器语音合成的工作原理、AI TTS 为何重要，以及如何将 TTS2Go 集成到你的 Vue 应用中，提供高品质、成本可控的音频。

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

让你的 Vue 应用“开口说话”，能为无障碍、用户参与度和用户体验带来新的可能。无论你在构建内容网站、在线学习平台，还是会朗读告警信息的仪表盘，文字转语音（TTS）都能让用户解放双手来获取内容。

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

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

每个现代浏览器都内置了 Web Speech API。只需几行使用 window.speechSynthesis.speak() 和 SpeechSynthesisUtterance 的 JavaScript 代码，就能在不依赖任何外部服务或 API 密钥的情况下朗读文本。

主要特点：

  • 完全在客户端运行 —— 无需后端或 API 调用。
  • 完全免费 —— 没有按用量计费。
  • 即刻集成 —— 只需极少的 JavaScript 代码。

主要缺点在于音质。浏览器自带的声音往往听起来很机械，在不同操作系统和浏览器之间差异明显，可选音色也很有限。同一段文本在 Chrome 和 Safari 上、在 Windows 和 macOS 上，听起来可能截然不同。

AI 生成语音的兴起

AI 驱动的文字转语音模型生成的音频几乎与真人无异，节奏、重音和语气都很自然。这类服务通常提供：

  • 数十种语言
  • 数百种独特音色
  • 对风格、语速和情感的更多控制

代价是生成这类音频需要花钱，并且需要调用 API。这就引出了一个关键问题：如何控制音频何时生成、由谁买单？

预先生成音频

一种方案是提前生成所有音频，并以静态文件的形式通过 CDN 提供。

优点：

  • 可即时播放。
  • 每位听众听到的音质都一致。

缺点：

  • 无论有没有人收听，你都要为每一篇内容支付音频生成费用。
  • 你必须提前掌握所有内容。
  • 任何内容更新都意味着要重新运行生成流程。
  • 存储成本随内容库规模线性增长。

对于规模小、内容稳定的内容库，这种方式尚可应付，但规模一大就会变得昂贵且缺乏灵活性。

按需延迟生成

更高效的策略是只在用户请求时才生成音频。

TTS2Go 如何解决这个问题

TTS2Go 采用混合模式，在音质、成本和简洁性之间取得平衡。

  1. 安全的前端密钥

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

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

当第一位访客点击某段内容上的 TTS 按钮时：

  • 他会立即听到浏览器语音合成的朗读。
  • 与此同时，一个生成请求会在后台发送到 TTS2Go。
  1. 审批与预算控制

在 TTS2Go 控制台中，你可以：

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

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

  1. 后续访客：即时 AI 音频

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

最终效果：

  • 首位访客通过浏览器 TTS 获得可用的体验。
  • 通过审批和速率限制，成本始终可控。
  • 之后的每个人都能享受高品质 AI 音频，且没有额外延迟。

第 1 步：安装 SDK

将 TTS2Go Vue 包添加到你的项目中：


npm install @tts2go/vue

这个包非常轻量，开箱即用地支持 Vue 3 和 组合式 API（Composition API）。

第 2 步：注册插件

在创建 Vue 应用时安装 TTS2GoPlugin。它会通过 Vue 的依赖注入机制，把 TTS2Go 客户端提供给每个组件。


import { createApp } from "vue";

import { TTS2GoPlugin } from "@tts2go/vue";

import App from "./App.vue";

const app = createApp(App);

app.use(TTS2GoPlugin, {

apiKey: "your-api-key",

projectId: "your-project-id",

});

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

在任意组件中使用 useTTS 组合式函数，即可获得响应式的播放控制。你也可以使用预置的 TTSButton 组件，直接获得现成的 UI。



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

const VOICE_ID = "your-voice-id";

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

const { status, play, stop, pause } = useTTS(text, VOICE_ID);

{{ text }}

{{ status.value === "playing" ? "Stop" : "Play" }}

行为说明：

  • 首次点击会触发浏览器 TTS，并在后台向 TTS2Go 发送一个生成请求。
  • 一旦该请求在控制台中获批并生成完成，之后所有在同一内容上点击 TTS 的用户，听到的都将是高品质 AI 音频，而不再是浏览器语音。

下一步做什么？

接下来，你可以探索 TTS2Go 为 Vue 提供的更多进阶功能：

  • 音色选择 —— 从多种音色和语言中挑选。
  • SSML 支持 —— 精细调整发音、重音、停顿和语速。
  • Highlight API —— 让屏幕上的文字与朗读内容同步高亮，提升无障碍体验和理解效果。

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

  • tts2go.com/docs/vue
返回全部文章