react-speech-kit 🎤     

React hooks for in-browser Speech Recognition and Speech Synthesis.
Demo here

Table of Contents

- Install
- Examples and Demo
- useSpeechSynthesis
- Usage
- Args
- Returns
- useSpeechRecognition
- Usage
- Args
- Returns

Install

``bash
yarn add react-speech-kit
`

Examples and Demo

A full example can be found here. The source code is in the examples directory.

useSpeechSynthesis

A react hook for the browser's SpeechSynthesis API. It exposes the options and controls to the underlying SpeechSynthesis in the browser.

$3

`jsx
import React, { useState } from 'react';
import { useSpeechSynthesis } from 'react-speech-kit';

function Example() {
const [value, setValue] = useState('');
const { speak } = useSpeechSynthesis();

return (


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

boolean

True when SpeechSynthesis is actively speaking.

#### supported

boolean

Will 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 (


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

boolean

True 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.