react-webspeech
v1.0.0TypeScript
Official WebSpeech for React.
5/weekUpdated 3 years agoMITUnpacked: 16.9 KB
Published by Bunlong
npm install react-webspeech
⭐️ If you like react-webspeech, give it a star! ⭐️
react-webspeech
react-webspeech – Official WebSpeech for React.
  !npm bundle size  
Features
* Compatible with both JavaScript and TypeScript
* useSpeechSynthesis (text-to-speech)
* useSpeechRecognition (speech-to-text)
Install
react-webspeech is available on npm:
``js`
npm install react-webspeech --save
react-webspeech is available on yarn as well:
`js`
yarn add react-webspeech
useSpeechSynthesis
useSpeechSynthesis is a text-to-speech react hook.
$3
`jsx
import React, { useState } from 'react';
import { useSpeechSynthesis } from 'react-webspeech';
function App() {
const [text, setText] = useState('I love React');
const { speak } = useSpeechSynthesis();
return (
onChange={(event) => setText(event.target.value)}
/>
);
}
export default App;
`
#### 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
⚖️ License
The MIT License 