SahilAggarwal2004
react-text-to-speech
An easy-to-use React.js component 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
useSpeechhook orSpeechcomponent. - Error and Event Handling: Provides APIs for managing errors and events via
useSpeechhook orSpeechcomponent. - Multiple Speech Instances: Supports multiple speech instances using
useSpeechhook orSpeechcomponent. - Customization: Fully customizable through the
useSpeechhook orSpeechcomponent. - Directives: Control playback behavior inline through special text syntax using Directives.
- Dynamic Controls: Programmatically adjust
pitch,rate,volume,lang, andvoiceURIduring 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:
# 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-speechUsage
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.