⭐️ If you like react-webspeech, give it a star! ⭐️
react-webspeech
react-webspeech – Official WebSpeech for React.
Features
- Compatible with both JavaScript and TypeScript
- useSpeechSynthesis (text-to-speech)
- useSpeechRecognition (speech-to-text)
Install
react-webspeech is available on npm:
npm install react-webspeech --save
react-webspeech is available on yarn as well:
yarn add react-webspeech
useSpeechSynthesis
useSpeechSynthesis
is a text-to-speech react hook.
Usage
import React useState from 'react';import useSpeechSynthesis from 'react-webspeech'; { const text setText = ; const speak = ; return <div> <textarea = = /> <button =>Speak</button> </div> ;} ;
Prop
Prop | Type | Require | Description |
---|---|---|---|
onEnd | () => void | ❌ | Called when SpeechSynthesis has finished being spoken. |
Return
Return | Type | Description |
---|---|---|
isSupported | boolean | true if the browsers supports SpeechSynthesis otherwise false . |
isSpeaking | boolean | true if SpeechSynthesis is speaking otherwise false . |
voices | SpeechSynthesisVoice[] |
Use to get an array of SpeechSynthesisVoice that is passed to the speak function. |
cancel | (): void | Called to stop reading. |
speak | (speak Params): void | Called to make SpeechSynthesis read the text. |
speak Params
Prop | Type | Default | Require | Description |
---|---|---|---|---|
text | string | "" |
❌ | The text that will be read by SpeechSynthesis. |
voice | SpeechSynthesisVoice | speechSynthesis.getVoices()[0] |
❌ | The voice that will be used to speak. |
rate | number | 1 |
❌ | The speed at which SpeechSynthesis will be spoken at. |
pitch | number | 1 |
❌ | The pitch at which SpeechSynthesis will be spoken at. |
volume | number | 1 |
❌ | The volume that SpeechSynthesis will be spoken at. |
💖 Wrap Up
If you think any of the react-webspeech
can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
🌟 Contribution
We'd love to have your helping hand on contributions to react-webspeech
by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
How to contribute:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback