react-webspeech

Official WebSpeech for React.

Usage no npm install needed!

<script type="module">
  import reactWebspeech from 'https://cdn.skypack.dev/react-webspeech';
</script>

README

⭐️ If you like react-webspeech, give it a star! ⭐️


react-webspeech

react-webspeech

react-webspeech – Official WebSpeech for React.

NPM downloads npm bundle size Build Status JavaScript Style Guide

Features

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 License: MIT