react-text-to-speech

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

Features

- Text-to-Speech: Converts text to speech using the Web Speech API.
- Text Highlighting: Highlights text as it’s read aloud using the useSpeech hook or Speech component.
- Error and Event Handling: Provides APIs for managing errors and events via useSpeech hook or Speech component.
- Multiple Speech Instances: Supports multiple speech instances using useSpeech hook or Speech component.
- Customization: Fully customizable through the useSpeech hook or Speech component.
- Directives: Control playback behavior inline through special text syntax using Directives.
- Dynamic Controls: Programmatically adjust pitch, rate, volume, lang, and voiceURI during speech.
- Unlimited Text Input: Overcomes the Web Speech API’s text length limit for continuous speech.
- Auto Cleanup: Automatically stops speech when the component unmounts.

Installation

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

``

bash

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

 component.



$3



#### Basic Usage

tsx

import React from "react";

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



export default function App() {

  const {

    Text, // Component that renders speech text in a

and supports standard HTML

 props

    speechStatus, // String that stores current speech status

    isInQueue, // Indicates whether the speech is currently playing or waiting in the queue

    start, // Function to start the speech or put it in queue

    pause, // Function to pause the speech

    stop, // Function to stop the speech or remove it from queue

  } = useSpeech({ text: "This library is awesome!", stableText: true });



  return (

    

      

      

        {speechStatus !== "started" ?  : }

        

      

    

  );

}





#### Detailed Usage



For more details on using the

useSpeech

 hook, refer to the documentation.



$3



#### Basic Usage

tsx

import React from "react";

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



export default function App() {

  return ;

}





#### Detailed Usage



For more details on using the

` 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.