react-say

A React component that synthesis text into speech using Web Speech API.

This project scaffold can be found at compulim/react-component-template.

Demo

Try out the demo at https://compulim.github.io/react-say/.

How to use

First, run npm install react-say for production build. Or run npm install react-say@master for latest development build.

Simple scenario

The following will speak the text immediately upon showing up. Some browsers may not speak the text until the user interacted with the page.

import Say from 'react-say';

export default props =>
  <Say speak="A quick brown fox jumped over the lazy dogs." />

Customizing pitch/rate/volume

You may want to customize the speech by varying pitch, rate, and volume. You can use <Composer> and <Say> to say your text.

import Say from 'react-say';

export default props =>
  <Say
    pitch={ 1.1 }
    rate={ 1.5 }
    speak="A quick brown fox jumped over the lazy dogs."
    volume={ .8 }
  />

Note: variation will take effect for new/modified <Say>

Say button

You may want to say something after the user interacted with the page, for example, after clicking on a button. We have built <SayButton> that speak immediately after clicking on it. Some browsers may requires "priming" with a button.

import { SayButton } from 'react-say';

export default props =>
  <SayButton
    onClick={ event => console.log(event) }
    speak="A quick brown fox jumped over the lazy dogs."
  >
    Tell me a story
  </SayButton>

Selecting voice

Instead of passing a SpeechSynthesisVoice object, you can pass a function (voices: SpeechSynthesisVoice[]) => SpeechSynthesisVoice to select the voice just before the text is synthesized.

import Say from 'react-say';

export default props =>
  <Say
    speak="A quick brown fox jumped over the lazy dogs."
    voice={ voices => [].find.call(voices, v => v.lang === 'zh-HK') }
  />

Note: it also works with <SayButton>.

Caveats

• If <Say> or <SayButton> is unmounted, the utterance will continue to speak
  • Web Speech does not support stopping or dequeueing a pending utterance, only to cancel all utterances at once
  • Since the utterance is already queued, speaking, or spoken, we cannot stop it and not cancelling other "innocent" utterance
  • We decided to let it continue but not firing any events after unmount

Contributions

Like us? Star us.

Want to make it better? File us an issue.

Don't like something you see? Submit a pull request.