react-webspeech

⭐️ 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';

function App() {
  const [text, setText] = useState('I love React');
  const { speak } = useSpeechSynthesis();

  return (
    <div>
      <textarea
        value={text}
        onChange={(event) => setText(event.target.value)}
      />
      <button onClick={() => speak({ text })}>Speak</button>
    </div>
  );
}

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