react-edge-tts

React Edge Text-to-Speech

Generate text-to-speech narration for React content using Microsoft Edge's TTS engine. This package allows you to easily add high-quality narration to your React content, such as blog posts, articles, or any text content.

Features

• 🎯 Simple React component for marking narration content
• 🔊 High-quality text-to-speech using Microsoft Edge's TTS engine
• 🎛️ Multiple voice options (US, UK, Australian accents)
• 🛠️ Build-time content extraction
• 📦 Separate audio generation step for optimal performance

Installation

npm install react-edge-tts
# or
yarn add react-edge-tts

Usage

1. Add Narration Components

Use the Narrate component to wrap content you want to narrate:

import { Narrate, VOICE_OPTIONS } from 'react-edge-tts';

function BlogPost() {
  return (
    <article>
      <Narrate
        title='welcome-section'
        voice={VOICE_OPTIONS.US_FEMALE}
        rate={1.1}
      >
        Welcome to my blog post! This text will be converted to speech.
      </Narrate>

      <Narrate title='main-content' voice={VOICE_OPTIONS.GB_MALE}>
        This is the main content of my blog post. It will be narrated with a
        British male voice.
      </Narrate>
    </article>
  );
}

2. Configure Babel

Add the babel plugin to your babel configuration:

// babel.config.js
module.exports = {
  plugins: [
    [
      'react-edge-tts/babel',
      {
        outputDir: 'narration-content', // optional, defaults to 'narration-content'
      },
    ],
  ],
};

3. Generate Audio

After building your project, run the CLI command to generate audio files:

npx react-edge-tts generate

Or with custom directories:

npx react-edge-tts generate --input ./my-content --output ./my-audio

4. Use the Generated Audio

The generated MP3 files will be in your output directory, named according to the title prop you provided to each Narrate component.

Component Props

Prop	Type	Default	Description
title	string	(required)	Unique identifier for the narration section
voice	VoiceId	US_FEMALE	Voice to use for narration
rate	number	1	Speech rate (0.5 to 2)
volume	number	1	Volume level (0 to 1)
pitch	number	1	Voice pitch (0.5 to 2)
showIndicator	boolean	dev only	Show narration indicator
indicatorStyle	CSSProperties	undefined	Custom styles for indicator

Available Voices

VOICE_OPTIONS.US_FEMALE; // en-US-JennyNeural
VOICE_OPTIONS.US_MALE; // en-US-GuyNeural
VOICE_OPTIONS.US_FEMALE_ALT; // en-US-AriaNeural
VOICE_OPTIONS.GB_FEMALE; // en-GB-SoniaNeural
VOICE_OPTIONS.GB_MALE; // en-GB-RyanNeural
VOICE_OPTIONS.AU_FEMALE; // en-AU-NatashaNeural
VOICE_OPTIONS.AU_MALE; // en-AU-WilliamNeural

List all available voices:

npx react-edge-tts list-voices

CLI Commands

Command	Description
generate	Generate audio files from narration content
list-voices	List all available voices

Generate Command Options

Option	Default	Description
--input, -i	narration-content	Input directory containing JSON files
--output, -o	narration-audio	Output directory for MP3 files

Development Indicators

In development mode, narrated sections will show a small indicator. Control this with the showIndicator prop:

<Narrate
  title='section'
  showIndicator={true} // Force show in production
  indicatorStyle={{ color: 'blue' }} // Custom styling
>
  Content
</Narrate>

License

GPL-3.0

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.