lobe-tts

Lobe TTS 项目介绍

项目简介

Lobe TTS 是一个高质量且可靠的文本转语音（TTS）和语音转文本（STT）库，支持服务器和浏览器环境。该项目由 LobeHub 开发，并在 GitHub 上开源。它使用户能够像与真人交谈一样与聊天代理互动，可以根据用户的偏好选择不同的声音。

在实现文本转语音功能的过程中，开发团队发现市面上缺少一个令人满意的前端 TTS 库。因此，他们投入了大量精力处理数据转换、音频进度管理以及语音可视化等任务。最终，他们决定优化实现并开源，希望能够帮助其他开发者。

Lobe TTS 是使用 TypeScript 开发的高质量 TTS 工具包，支持在服务器端和浏览器端使用：

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

使用方法

在服务器上生成语音

以下示例代码展示了如何在服务器上使用 Lobe TTS 生成语音：

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

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

const payload = {
  input: 'This is a speech demonstration',
  options: {
    voice: 'en-US-GuyNeural',
  },
};

const response = await tts.create(payload);

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

fs.writeFileSync(speechFile, mp3Buffer);

**注意：**在 Node.js 环境中运行时，由于缺少 WebSocket 实例，需要通过 ws 包进行填充：

import WebSocket from 'ws';

global.WebSocket = WebSocket;

使用 React 组件

以下是如何在 React 应用中使用 Lobe TTS 的例子：

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>
  );
};

安装

要安装 @lobehub/tts 包，可以使用以下命令：

$ pnpm i @lobehub/tts

或使用 Bun：

$ bun add @lobehub/tts

在 Next.js 中编译

要在 Next.js 中正确工作，需要在 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

贡献

Lobe TTS 欢迎各种形式的贡献。如果你对代码贡献感兴趣，可以查看我们的 GitHub Issues 来了解如何开始。