React hooks for in-browser Speech Recognition and Speech Synthesis.
React hooks for in-browser Speech Recognition and Speech Synthesis.
Demo here
- Install
- Examples and Demo
- useSpeechSynthesis
- Usage
- Args
- Returns
- useSpeechRecognition
- Usage
- Args
- Returns
``bash`
yarn add react-speech-kit
A full example can be found here. The source code is in the examples directory.
A react hook for the browser's SpeechSynthesis API. It exposes the options and controls to the underlying SpeechSynthesis in the browser.
`jsx
import React, { useState } from 'react';
import { useSpeechSynthesis } from 'react-speech-kit';
function Example() {
const [value, setValue] = useState('');
const { speak } = useSpeechSynthesis();
return (
$3
#### onEnd
function() _optional_Called when SpeechSynthesis finishes reading the text or is cancelled. It is called with no argumnents. Very useful for triggering a state change after something has been read.
$3
useSpeechSynthesis returns an object which contains the following:
#### speak
function({ text: string, voice: SpeechSynthesisVoice })Call to make the browser read some text. You can change the voice by passing an available SpeechSynthesisVoice (from the voices array). Note that some browsers require a direct user action initiate SpeechSynthesis. To make sure it works, it is recommended that you call speak for the first time in a click event handler.
#### cancel
function()Call to make SpeechSynthesis stop reading.
#### speaking
booleanTrue when SpeechSynthesis is actively speaking.
#### supported
booleanWill be true if the browser supports SpeechSynthesis. Keep this in mind and use this as a guard before rendering any control that allow a user to call speak.
#### voices
[SpeechSynthesisVoice]An array of available voices which can be passed to the speak function. An example SpeechSynthesisVoice voice has the following properties.
`
{
default: true
lang: "en-AU"
localService: true
name: "Karen"
voiceURI: "Karen"
}
`In some browsers voices load asynchronously. In these cases, the array will be empty until they are available.
useSpeechRecognition
A react hook for the browser's SpeechRecognition API.
$3
`jsx
import React, { useState } from 'react';
import { useSpeechRecognition } from 'react-speech-kit';function Example() {
const [value, setValue] = useState('');
const { listen, listening, stop } = useSpeechRecognition({
onResult: (result) => {
setValue(result);
},
});
return (
value={value}
onChange={(event) => setValue(event.target.value)}
/>
{listening && Go ahead I'm listening}
);
}
`$3
#### onEnd
function()Called when SpeechRecognition stops listening.
#### onResult
function(string)Called when SpeechRecognition has a result. It is called with a string containing a transcript of the recognized speech.
$3
useSpeechRecognition returns an object which contains the following:
#### listen
function({ interimResults: boolean, lang: string })Call to make the browser start listening for input. Every time it processes a result, it will forward a transcript to the provided onResult function. You can modify behavior by passing the following arguments:
- lang
string
The language the SpeechRecognition will try to interpret the input in. Use the languageCode from this list of languages that Chrome supports (here) e.g: "en-AU". If not specified, this defaults to the HTML lang attribute value, or the user agent's language setting if that isn't set either.- interimResults
boolean _(default: true)_
SpeechRecognition can provide realtime results as it's trying to figure out the best match for the input. Set to false if you only want the final result.#### stop
function()Call to make SpeechRecognition stop listening. This will call the provided onEnd function as well.
#### listening
booleanTrue when SpeechRecognition is actively listening.
#### supported
boolean`Will be true if the browser supports SpeechRecognition. Keep this in mind and use this as a guard before rendering any control that allow a user to call listen.