Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 1 day 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 (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-23T08:43:56.000Z (3 days ago)
- Last Synced: 2024-12-23T09:33:18.334Z (3 days 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://www.npmjs.com/package/react-text-to-speech
- Size: 1.17 MB
- Stars: 29
- Watchers: 3
- Forks: 4
- 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
- Converts text to speech using the Web Speech API.
- Highlights words as they are read aloud. See:
- [Highlighting text with `useSpeech` hook](https://rtts.vercel.app/docs/usage/useSpeech#highlight-text).
- [Highlighting text with `Speech` component](https://rtts.vercel.app/docs/usage/speech#highlight-text).
- Provides an API for handling errors and events:
- [Error handling with `useSpeech` hook](https://rtts.vercel.app/docs/usage/useSpeech#handling-errors-and-events).
- [Error handling with `Speech` component](https://rtts.vercel.app/docs/usage/speech#handling-errors-and-events).
- Manages multiple speech instances:
- [Multiple instances with `useSpeech` hook](https://rtts.vercel.app/docs/usage/useSpeech#multiple-instance-usage).
- [Multiple instances with `Speech` component](https://rtts.vercel.app/docs/usage/speech#multiple-instance-usage).
- Fully customizable for various use cases:
- [Customizing `useSpeech` hook](https://rtts.vercel.app/docs/usage/useSpeech).
- [Customizing `Speech` component](https://rtts.vercel.app/docs/usage/speech#full-customization).
- Overcomes the [Web Speech API's text length limit](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/text), enabling infinite text input.
- Automatically stops speech instances 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 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 (
{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).
## Explore Other Solutions
[](https://github.com/albirrkarim/react-speech-highlight-demo)
[React Speech Highlight](https://github.com/albirrkarim/react-speech-highlight-demo), 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.