Lobe TTS

A high-quality & reliable TTS/STT library for Server and Browser [![][npm-release-shield]][npm-release-link] [![][github-releasedate-shield]][github-releasedate-link] [![][github-action-test-shield]][github-action-test-link] [![][github-action-release-shield]][github-action-release-link]
[![][github-contributors-shield]][github-contributors-link] [![][github-forks-shield]][github-forks-link] [![][github-stars-shield]][github-stars-link] [![][github-issues-shield]][github-issues-link] [![][github-license-shield]][github-license-link]
[![][sponsor-shield]][sponsor-link] [Documents](https://tts.lobehub.com) · [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link] ![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284077909-854cc09a-b3c7-4fc4-9ea7-f7137abba351.png)

Table of contents

#### TOC - [📖 Introduction](#-introduction) - [📦 Usage](#-usage) - [Generate Speech on server](#generate-speech-on-server) - [Use the React Component](#use-the-react-component) - [📦 Installation](#-installation) - [Compile with Next.js](#compile-with-nextjs) - [⌨️ Local Development](#️-local-development) - [🤝 Contributing](#-contributing) - [🩷 Sponsor](#-sponsor) - [🔗 Links](#-links) - [More Products](#more-products) - [Design Resources](#design-resources) - [Development Resources](#development-resources) ####

## 📖 Introduction [🤖 Lobe Chat](https://github.com/lobehub/lobe-chat) supports Text-to-Speech (TTS) and Speech-to-Text (STT) technologies, enabling our application to convert text messages into clear voice outputs, allowing users to interact with our conversational agent as if they were talking to a real person. Users can choose from a variety of voices to pair with the agent. In the process of implementing this feature, we found that there was no satisfactory TTS (Text-to-Speech) frontend library available on the market. As a result, we invested a lot of effort, including data conversion, audio progress management, and speech visualization, among other tasks. > \[!NOTE] > > Therefore, we decided to refine our implementation and make it open source, hoping to assist developers who wish to implement TTS. > [@lobehub/tts][npm-release-link] is a high-quality TTS toolkit developed in TypeScript, which supports usage both on the server-side and in the browser. > > - **Server-side:** With just 15 lines of code, you can achieve high-quality voice generation capabilities comparable to OpenAI's TTS service. It currently supports EdgeSpeechTTS, MicrosoftTTS, OpenAITTS, and OpenAISTT. > - **Browser-side:** It provides high-quality React Hooks and visual audio components, supporting common functions such as loading, playing, pausing, and dragging the timeline. Additionally, it offers a very rich set of capabilities for adjusting the audio track styles. ## 📦 Usage ### Generate Speech on server run the script below use Bun: `bun index.js` ```js // index.js import { EdgeSpeechTTS } from '@lobehub/tts'; import { Buffer } from 'buffer'; import fs from 'fs'; import path from 'path'; // Instantiate EdgeSpeechTTS const tts = new EdgeSpeechTTS({ locale: 'en-US' }); // Create speech synthesis request payload const payload = { input: 'This is a speech demonstration', options: { voice: 'en-US-GuyNeural', }, }; // Call create method to synthesize speech const response = await tts.create(payload); // generate speech file const mp3Buffer = Buffer.from(await response.arrayBuffer()); const speechFile = path.resolve('./speech.mp3'); fs.writeFileSync(speechFile, mp3Buffer); ``` > \[!IMPORTANT]\ > **Run on Node.js** > > As the Node.js environment lacks the `WebSocket` instance, we need to polyfill WebSocket. This can be done by importing the ws package. ```js // import at the top of the file import WebSocket from 'ws'; global.WebSocket = WebSocket; ``` ### Use the React Component ```tsx import { AudioPlayer, AudioVisualizer, useAudioPlayer } from '@lobehub/tts/react'; export default () => { const { ref, isLoading, ...audio } = useAudioPlayer(url); return ( ); }; ``` ## 📦 Installation > \[!IMPORTANT]\ > This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). To install `@lobehub/tts`, run the following command: ```bash $ pnpm i @lobehub/tts ``` [![][bun-shield]][bun-link] ```bash $ bun add @lobehub/tts ``` ### Compile with Next.js > \[!NOTE]\ > By work correct with Next.js SSR, add `transpilePackages: ['@lobehub/tts']` to `next.config.js`. For example: ```js const nextConfig = { transpilePackages: ['@lobehub/tts'], }; ```