目录

目录

• 📖 简介
• 📦 使用方法
  • 在服务器上生成语音
  • 使用 React 组件
• 📦 安装
  • 与 Next.js 集成
• ⌨️ 本地开发
• 🤝 贡献
• 🩷 赞助
• 🔗 链接
  • 更多产品
  • 设计资源
  • 开发资源

📖 简介

🤖 Lobe Chat 支持文本转语音（TTS）和语音转文本（STT）技术，使我们的应用能够将文本消息转换为清晰的语音输出， 让用户可以像与真人交谈一样与我们的对话代理进行互动。用户还可以从多种声音中选择与代理搭配。

在实现这一功能的过程中，我们发现市场上并没有令人满意的前端 TTS 库。 因此，我们投入了大量精力，包括数据转换、音频进度管理以及语音可视化等工作。

[!NOTE]

因此，我们决定将我们的实现进一步完善并开源，希望能帮助那些希望实现 TTS 的开发者。 @lobehub/tts 是一个用 TypeScript 开发的高质量 TTS 工具包，支持在服务器端和浏览器端使用。

• 服务器端: 只需 15 行代码，即可实现与 OpenAI 的 TTS 服务相媲美的高质量语音生成能力。目前支持 EdgeSpeechTTS、MicrosoftTTS、OpenAITTS 和 OpenAISTT。
• 浏览器端: 提供高质量的 React Hooks 和可视化音频组件，支持加载、播放、暂停、拖动时间轴等常用功能。此外，还提供了非常丰富的音频轨道样式调整功能。

📦 使用方法

在服务器上生成语音

使用 Bun 运行以下脚本：bun index.js

// index.js
import { EdgeSpeechTTS } from '@lobehub/tts';
import { Buffer } from 'buffer';
import fs from 'fs';
import path from 'path';

// 实例化 EdgeSpeechTTS
const tts = new EdgeSpeechTTS({ locale: 'en-US' });

// 创建语音合成请求载荷
const payload = {
  input: '这是一个语音演示',
  options: {
    voice: 'en-US-GuyNeural',
  },
};

// 调用 create 方法进行语音合成
const response = await tts.create(payload);

// 生成语音文件
const mp3Buffer = Buffer.from(await response.arrayBuffer());
const speechFile = path.resolve('./speech.mp3');

fs.writeFileSync(speechFile, mp3Buffer);

https://github.com/lobehub/lobe-tts/assets/28616219/3ab68c5a-2745-442e-8d66-ca410192ace1

[!IMPORTANT]
在 Node.js 上运行

由于 Node.js 环境缺少 WebSocket 实例，我们需要对 WebSocket 进行 polyfill。可以通过导入 ws 包来实现。

// 在文件顶部引入
import WebSocket from 'ws';

global.WebSocket = WebSocket;

使用 React 组件

import { AudioPlayer, AudioVisualizer, useAudioPlayer } from '@lobehub/tts/react';

export default () => {
  const { ref, isLoading, ...audio } = useAudioPlayer(url);

  return (
    <Flexbox align={'center'} gap={8}>
      <AudioPlayer audio={audio} isLoading={isLoading} style={{ width: '100%' }} />
      <AudioVisualizer audioRef={ref} isLoading={isLoading} />
    </Flexbox>
  );
};

https://github.com/lobehub/lobe-tts/assets/28616219/c2638383-314f-44c3-b358-8fbbd3028d61

📦 安装

[!IMPORTANT]
本包仅支持 ESM 格式（https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c）。

要安装 @lobehub/tts，请运行以下命令：

$ pnpm i @lobehub/tts

$ bun add @lobehub/tts

与 Next.js 集成

[!NOTE]
为了正确地与 Next.js 的 SSR 配合使用，请在 next.config.js 中添加 transpilePackages: ['@lobehub/tts']。例如：

const nextConfig = {
  transpilePackages: ['@lobehub/tts'],
};

⌨️ 本地开发

你可以使用 Github Codespaces 进行在线开发：

或者克隆仓库进行本地开发：

$ git clone https://github.com/lobehub/lobe-tts.git
$ cd lobe-tts
$ bun install
$ bun dev

🤝 贡献

我们欢迎各种形式的贡献。如果你有兴趣参与代码贡献，不妨查看我们的 GitHub Issues，加入其中，向我们展示你的实力吧。

🩷 赞助

每一份支持都至关重要，你的一次性捐赠就像夜空中闪耀的流星，为我们的支持星河增添了一抹亮色！你是那颗划破天际的流星，以迅捷而明亮的光芒照亮我们的前行之路。感谢你对我们的信任——你的慷慨正引领我们一步步实现使命，每一次闪耀都是我们前进的动力。

🔗 链接

更多产品

• 🤯 LobeHub - 一个开源、可扩展（支持函数调用）、高性能的聊天机器人框架。它支持一键免费部署你的私有 ChatGPT/LLM Web 应用。
• 🅰️ Lobe Theme - Stable Diffusion WebUI 的现代主题，拥有精致的界面设计、高度可定制的 UI 以及提升效率的功能。
• 🧸 Lobe Vidol - 使用 Lobe Vidol 体验虚拟偶像创作的魔力，享受我们精美的 UI 设计，借助 MMD 舞蹈支持一起舞动，并进行流畅的对话。

设计资源

• 🍭 Lobe UI - 用于构建 AIGC Web 应用的开源 UI 组件库。
• 🥨 Lobe Icons - 热门 AI/LLM 模型品牌的 SVG Logo 和图标合集。
• 📊 Lobe Charts - 基于 recharts 构建的 React 现代化图表组件。

开发资源

• 🎤 Lobe TTS - 一款高质量且可靠的 TTS/STT 库，适用于服务器端和浏览器端。
• 🌏 Lobe i18n - 用于国际化翻译流程的自动化 AI 工具。

更多资源

---

📝 许可证

版权所有 © 2023 LobeHub。
本项目采用 MIT 许可证。

Lobe TTS 快速上手指南

Lobe TTS 是一个高质量且可靠的文本转语音（TTS）与语音转文本（STT）库，支持服务端（Node.js/Bun）和浏览器端（React）使用。它提供了类似 OpenAI TTS 的服务端生成能力，以及丰富的 React 音频播放与可视化组件。

环境准备

• 运行时环境：Node.js (建议 v18+) 或 Bun
• 包管理器：pnpm, npm, yarn 或 bun
• 框架支持：原生 JS/TS, React, Next.js
• 前置依赖：
  • 若在服务端（Node.js）运行，需安装 ws 包以 polyfill WebSocket（Node 环境原生不支持）。
  • 若在 Next.js 中使用，需配置 transpilePackages。

安装步骤

推荐使用 pnpm 或 bun 进行安装：

# 使用 pnpm
pnpm i @lobehub/tts

# 或使用 bun
bun add @lobehub/tts

注意：该包仅支持 ESM 模块。

Next.js 特别配置

若在 Next.js 项目中使用（特别是涉及 SSR），需在 next.config.js 中添加转译配置：

const nextConfig = {
  transpilePackages: ['@lobehub/tts'],
};

module.exports = nextConfig;

基本使用

1. 服务端生成语音 (Node.js/Bun)

以下示例展示如何使用 EdgeSpeechTTS 生成 MP3 文件。

注意：在 Node.js 环境中，必须先引入并全局注册 ws 以支持 WebSocket。

// index.js
import WebSocket from 'ws'; // Node.js 环境必须引入
global.WebSocket = WebSocket;

import { EdgeSpeechTTS } from '@lobehub/tts';
import { Buffer } from 'buffer';
import fs from 'fs';
import path from 'path';

// 实例化 TTS (设置语言区域)
const tts = new EdgeSpeechTTS({ locale: 'en-US' });

// 创建请求负载
const payload = {
  input: 'This is a speech demonstration',
  options: {
    voice: 'en-US-GuyNeural',
  },
};

// 调用 create 方法合成语音
const response = await tts.create(payload);

// 生成 mp3 文件
const mp3Buffer = Buffer.from(await response.arrayBuffer());
const speechFile = path.resolve('./speech.mp3');

fs.writeFileSync(speechFile, mp3Buffer);

运行脚本（以 Bun 为例）：

bun index.js

2. 浏览器端使用 (React 组件)

Lobe TTS 提供了开箱即用的 React Hooks 和可视化组件，支持播放、暂停、加载状态及音频波形可视化。

import { AudioPlayer, AudioVisualizer, useAudioPlayer } from '@lobehub/tts/react';

export default () => {
  // 传入音频 URL
  const { ref, isLoading, ...audio } = useAudioPlayer(url);

  return (
    <Flexbox align={'center'} gap={8}>
      {/* 音频播放器 */}
      <AudioPlayer audio={audio} isLoading={isLoading} style={{ width: '100%' }} />
      {/* 音频可视化波形 */}
      <AudioVisualizer audioRef={ref} isLoading={isLoading} />
    </Flexbox>
  );
};

该库目前支持 EdgeSpeechTTS, MicrosoftTTS, OpenAITTS 等多种后端服务，开发者可根据需求切换实例化类。