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.