Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bunlong/react-webspeech
The official WebSpeech for React.
https://github.com/bunlong/react-webspeech
javascript react react-webspeech speech-recognition speech-synthesis typescript webspeech
Last synced: about 2 hours ago
JSON representation
The official WebSpeech for React.
- Host: GitHub
- URL: https://github.com/bunlong/react-webspeech
- Owner: Bunlong
- License: mit
- Created: 2020-07-12T14:31:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-07-25T08:07:08.000Z (over 4 years ago)
- Last Synced: 2024-12-20T07:43:32.992Z (16 days ago)
- Topics: javascript, react, react-webspeech, speech-recognition, speech-synthesis, typescript, webspeech
- Language: TypeScript
- Homepage:
- Size: 137 KB
- Stars: 10
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
⭐️ If you like react-webspeech, give it a star! ⭐️
# react-webspeech
react-webspeech – Official WebSpeech for React.
[](https://www.npmjs.com/package/react-webspeech) [](https://www.npmjs.com/package/react-webspeech)  [](https://travis-ci.com/Bunlong/react-webspeech) [](https://standardjs.com)
## Features
* [x] Compatible with both JavaScript and TypeScript
* [x] useSpeechSynthesis (text-to-speech) – [Demo](https://fbv4x.csb.app/).
* [ ] useSpeechRecognition (speech-to-text) – Coming in next version.
## 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.
### Usage
```jsx
import React, { useState } from 'react';
import { useSpeechSynthesis } from 'react-webspeech';
function App() {
const [text, setText] = useState('I love React');
const { speak } = useSpeechSynthesis();
return (
setText(event.target.value)}
/>
speak({ text })}>Speak
);
}
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 [](https://opensource.org/licenses/MIT)