react-edge-tts v1.0.3

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

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

Generate Command Options

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.