OpenViSTAI · Agents · Blockchain · Crypto
Submit a project
Menu
Audio & Voice AI

Lobe Tts

Lobe TTS is an open-source TypeScript library for adding text-to-speech and speech-to-text to browser and server applications. It includes server-side speech generation and React hooks and components for audio playback and visualization.

Explore the practical guide ↓

Independent OpenViST project profile, based on linked sources.

Lobe Tts — OpenViST project profile in Audio & Voice AI.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use Lobe TTS when implementing speech features in your own browser or server application, rather than looking for a standalone hosted speech service.

Who it is for

  • Developers adding spoken output or speech input to web applications.
  • Teams building voice interfaces with server-generated speech and browser audio controls.

Documented uses

  • Convert text into speech and save the generated audio as an MP3.
  • Add a React audio player with loading state and an audio visualizer.
  • Add speech-to-text or text-to-speech capabilities to an application.
Before you choose

Requirements & limits

  • The package is ESM-only and can be installed with pnpm or Bun.
  • Node.js use requires a WebSocket polyfill with ws.
  • Next.js SSR requires @lobehub/tts to be listed in transpilePackages.
  • The README names EdgeSpeechTTS, MicrosoftTTS, OpenAITTS and OpenAISTT as server-side options.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Generate an MP3 from text on a server

Use the documented EdgeSpeechTTS example to synthesize speech and save the result as an MP3 file.

Before you start

  • Install the ESM-only @lobehub/tts package with pnpm or Bun.
  • Use Node.js with the ws package to polyfill WebSocket; the README's script is run with Bun.
  • Use the documented EdgeSpeechTTS class and provide text, locale and voice.

Steps

  1. Import EdgeSpeechTTS from @lobehub/tts and initialize it with the en-US locale.

  2. Create a request with input text and the en-US-GuyNeural voice.

  3. Call create with the request and convert the response array buffer to a Buffer.

  4. Write the buffer to a speech.mp3 file.

Expected outcome

The example writes synthesized speech to speech.mp3.

Guide limitations

  • The documented sample uses EdgeSpeechTTS and a specific English voice; it does not describe configuration for other providers.
  • Node.js requires a WebSocket polyfill using ws.
Documentation 1 ↗
Source-based practical guide

Add a React audio player and visualizer

Render the documented player and audio visualizer for an audio URL in a React component.

Before you start

  • Install @lobehub/tts.
  • Use React and provide an audio URL to useAudioPlayer.

Steps

  1. Import AudioPlayer, AudioVisualizer and useAudioPlayer from @lobehub/tts/react.

  2. Pass the audio URL to useAudioPlayer and retain its ref, loading state and audio controls.

  3. Render AudioPlayer with the audio state and loading state, and AudioVisualizer with the audio ref and loading state.

Expected outcome

The component renders audio playback controls and a visualizer tied to the audio player.

Guide limitations

  • The example assumes a URL for the audio and does not document how to obtain or host it.
  • Next.js server-side rendering requires adding @lobehub/tts to transpilePackages.
Documentation 1 ↗
Evidence and transparency

Sources & review

Official repository ↗
Source record details
Source availability
Active
Sources checked
13 October 2026
Original website title
lobehub/lobe-tts · Official homepage title · retained in its source language
How we review sourcesSuggest a correction