lobehub/lobe-tts

Lobe TTS – Text‑to‑Speech & Speech‑to‑Text for JavaScript/TypeScript

What it is

• A small, pure‑JavaScript library (@lobehub/tts) that lets you convert text to spoken audio and transcribe spoken audio back to text.
• Works both on the server (Node.js / Bun) and in the browser, and ships ready‑made React hooks and UI components for quick integration.

Why you might use it

• Unified API – the same function calls work with several providers (Microsoft Edge, Microsoft Speech, OpenAI, or the browser’s built‑in speech synthesis). You can swap the backend without changing your app code.
• Server‑side generation – create MP3 files on the backend and serve them to clients, useful for pre‑rendered podcasts, voice notifications, or accessibility features.
• Client‑side playback – in a React app you can start speaking instantly, with a built‑in <AudioPlayer> that shows progress, lets the user pause, and offers a download button.
• Long‑form handling – the library streams audio so long passages start playing before the whole file is ready, giving a smoother UX.
• AI‑friendly docs – it publishes skills.md and llms.txt files so AI coding assistants (Claude, Cursor, Copilot, etc.) can read the API and generate code automatically.

How to get started

# Install the core package (ESM‑only)
pnpm i @lobehub/tts

• For React you also need @lobehub/ui, react@^19 and react-dom@^19.

Server‑side example (Bun / Node 22+)

import { EdgeSpeechTTS } from '@lobehub/tts';
import fs from 'node:fs';

const tts = new EdgeSpeechTTS({ locale: 'en-US' });
const response = await tts.create({
  input: 'This is a speech demonstration',
  options: { voice: 'en-US-GuyNeural' }
});
fs.writeFileSync('./speech.mp3', Buffer.from(await response.arrayBuffer()));

(If you run on older Node, provide a global WebSocket implementation.)

React usage

import { AudioPlayer, useEdgeSpeech } from '@lobehub/tts/react';
import { Button, Flexbox } from '@lobehub/ui';

export default function Demo() {
  const { isGlobalLoading, start, stop, audio } = useEdgeSpeech('Hello from Lobe TTS', {
    options: { voice: 'en-US-GuyNeural' }
  });
  return (
    <Flexbox gap={8}>
      <Button loading={isGlobalLoading} ? stop : start}>
        Speak
      </Button>
      <AudioPlayer audio={audio} isLoading={isGlobalLoading} />
    </Flexbox>
  );
}

Add transpilePackages: ['@lobehub/tts'] to a Next.js config if needed.

Package layout

Package	Purpose
@lobehub/tts	Core API – generate speech or transcribe audio, usable in any JS environment.
@lobehub/tts/server	Helper for proxying OpenAI speech / transcription through your own API route.
@lobehub/tts/react	React hooks (useEdgeSpeech, useOpenAISpeech, …) and <AudioPlayer> component.

Documentation & community

• Full docs, live demos and API reference live at tts.lobehub.com.
• The project is open‑source (MIT) and welcomes contributions via GitHub Issues and Pull Requests.
• Sponsorship is possible through OpenCollective.

Who might benefit

• Front‑end developers building web apps that need voice feedback or voice commands.
• Backend services that need to generate audio files on demand (e.g., automated announcements, accessibility tools).
• Teams that already use Lobe’s UI component library and want a consistent, plug‑and‑play speech solution.

---

All details above are taken directly from the repository’s README; no additional features have been inferred.