react-text-to-speech

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 the useSpeech hook.
  • Highlighting text with the Speech component.
• Provides an API for handling errors and events:
  • Handling errors and events with the useSpeech hook.
  • Handling errors and events with the Speech component.
• Manages multiple speech instances:
  • Multiple instances with the useSpeech hook.
  • Multiple instances with the Speech component.
• Fully customizable for various use cases:
  • Using the useSpeech hook.
  • Customizing the 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 whether the speech is currently playing or waiting in the queue
    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.

Changelog

1.3.1 (02-03-2025)

• fix: Reset speakingWord when resuming speech after pitch, rate, or volume change to prevent out-of-sync issues.