react-text-to-speech

An easy-to-use React.js component that leverages the Web Speech API to convert text to speech.

Features

• Converts text to speech using the Web Speech API.
• Highlights words as they are read aloud. See:
  • Highlighting text with useSpeech hook.
  • Highlighting text with Speech component.
• Provides an API for handling errors and events:
  • Error handling with useSpeech hook.
  • Error handling with Speech component.
• Manages multiple speech instances:
  • Multiple instances with useSpeech hook.
  • Multiple instances with Speech component.
• Fully customizable for various use cases:
  • Customizing useSpeech hook.
  • Customizing Speech component.
• Overcomes the Web Speech API's text length limit, enabling infinite text input.
• Automatically stops speech instances when the component unmounts.

Installation

Install react-text-to-speech using your preferred package manager:

# Using npm:
npm install react-text-to-speech --save

# Using Yarn:
yarn add react-text-to-speech

# Using pnpm:
pnpm add react-text-to-speech

# Using Bun:
bun add react-text-to-speech

Usage

react-text-to-speech provides two primary methods to integrate text-to-speech functionality into your React.js applications: the useSpeech hook and the <Speech> component.

useSpeech Hook

Basic Usage

import React from "react";
import { useSpeech } from "react-text-to-speech";

export default function App() {
  const {
    Text, // Component that renders the processed text
    speechStatus, // Current speech status
    isInQueue, // Indicates if the speech is active or queued
    start, // Starts or queues the speech
    pause, // Pauses the speech
    stop, // Stops or removes the speech from the queue
  } = useSpeech({ text: "This library is awesome!" });

  return (
    <div style={{ display: "flex", flexDirection: "column", rowGap: "1rem" }}>
      <Text />
      <div style={{ display: "flex", columnGap: "0.5rem" }}>
        {speechStatus !== "started" ? <button onClick={start}>Start</button> : <button onClick={pause}>Pause</button>}
        <button onClick={stop}>Stop</button>
      </div>
    </div>
  );
}

Detailed Usage

For more details on using the useSpeech hook, refer to the documentation.

<Speech> Component

Basic Usage

import React from "react";
import Speech from "react-text-to-speech";

export default function App() {
  return <Speech text="This library is awesome!" />;
}

Detailed Usage

For more details on using the <Speech> component, refer to the documentation.

Demo

Check out the live demo to see it in action.

Documentation

Explore the documentation to get started quickly.

Contribute

Show your ❤️ and support by giving a ⭐ on GitHub. You can also support the project by upvoting and sharing it on Product Hunt. Any suggestions are welcome! Take a look at the contributing guide.

License

This project is licensed under the MIT License.

Explore Other Solutions

React Speech Highlight, React text to speech with highlighting realtime the words and sentences that are being spoken using audio files, text-to-speech API, and web speech synthesis API. Also it offer powerful, flexible programatic API for many use cases.