https://github.com/sahilaggarwal2004/react-text-to-speech
An easy-to-use React.js component that leverages the Web Speech API to convert text to speech.
https://github.com/sahilaggarwal2004/react-text-to-speech
a11y frontend highlight-text javascript npm-package queue react react-component react-hooks react-text-to-speech speech speech-recognition speech-syntheis speech-technology text-to-speech tts typescript voice web-audio web-speech-api
Last synced: about 2 months ago
JSON representation
An easy-to-use React.js component that leverages the Web Speech API to convert text to speech.
- Host: GitHub
- URL: https://github.com/sahilaggarwal2004/react-text-to-speech
- Owner: SahilAggarwal2004
- License: mit
- Created: 2022-08-17T07:42:54.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-03-28T16:32:51.000Z (about 2 months ago)
- Last Synced: 2025-03-30T00:05:07.725Z (about 2 months ago)
- Topics: a11y, frontend, highlight-text, javascript, npm-package, queue, react, react-component, react-hooks, react-text-to-speech, speech, speech-recognition, speech-syntheis, speech-technology, text-to-speech, tts, typescript, voice, web-audio, web-speech-api
- Language: TypeScript
- Homepage: https://rtts.vercel.app
- Size: 1.67 MB
- Stars: 49
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# react-text-to-speech
An easy-to-use React.js component that leverages the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/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 is read aloud using the [`useSpeech` hook](https://rtts.vercel.app/docs/usage/useSpeech#highlight-text) or [`Speech` component](https://rtts.vercel.app/docs/usage/speech#highlight-text).
- **Error and Event Handling:** Provides APIs for managing errors and events via [`useSpeech` hook](https://rtts.vercel.app/docs/usage/useSpeech#handling-errors-and-events) or [`Speech` component](https://rtts.vercel.app/docs/usage/speech#handling-errors-and-events).
- **Multiple Speech Instances:** Supports multiple speech instances using [`useSpeech` hook](https://rtts.vercel.app/docs/usage/useSpeech#multiple-instance-usage) or [`Speech` component](https://rtts.vercel.app/docs/usage/speech#multiple-instance-usage).
- **Customization:** Fully customizable through the [`useSpeech` hook](https://rtts.vercel.app/docs/usage/useSpeech) or [`Speech` component](https://rtts.vercel.app/docs/usage/speech#full-customization).
- **Unlimited Text Input:** Overcomes the [Web Speech API's text length limit](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/text) for continuous speech.
- **Dynamic Controls:** Dynamically adjust `pitch`, `rate`, `volume`, `lang`, and `voiceURI` during 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.
### `useSpeech` Hook
#### Basic Usage
```tsx
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 (
{speechStatus !== "started" ? Start : Pause}
Stop
);
}
```
#### Detailed Usage
For more details on using the `useSpeech` hook, [refer to the documentation](https://rtts.vercel.app/docs/usage/useSpeech).
### `` Component
#### 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](https://rtts.vercel.app/docs/usage/speech).
## Demo
[Check out the live demo](https://rtts.vercel.app/demo) to see it in action.
## Documentation
Explore the [documentation](https://rtts.vercel.app/docs/) to get started quickly.
## Contribute
Show your ❤️ and support by giving a ⭐ on [GitHub](https://github.com/SahilAggarwal2004/react-text-to-speech). You can also support the project by upvoting and sharing it on [Product Hunt](https://www.producthunt.com/posts/react-text-to-speech). Any suggestions are welcome! Take a look at the [contributing guide](CONTRIBUTING.md).
## License
This project is licensed under the [MIT License](LICENSE).