@afsalk/use-speech-recognition

useSpeechRecognition

A react hook for speech recognition using SpeechRecognition API

Getting started

Demo

Please see the demo app

Example

Here is an example of the usage of the hook in Stackblitz, fork and play with it 🚀

Install

npm i @afsalk/use-speech-recognition

or

yarn add @afsalk/use-speech-recognition

Usage

Import the useSpeechRecognition hook into your component

import { useSpeechRecognition } from "@afsalk/use-speech-recognition";

And use the hook without any config

const { start, stop, result, isListening, errorMessage } = useSpeechRecognition();

Properties

Property	Type	Description
start	() => void	Starts speech recognition.
stop	() => void	Stop speech recognition.
isListening	boolean	Indicates whether recognition is active.
result	string	Holds the recognized text.
errorMessage	string	Contains any error messages.

Optional Parameters & Event handlers

Parameter	Type	Description
grammarList	string[]	The list of grammars will be understood by the SpeechRecognition, default value is []
autoStopTimeout	number	Set a timeout delay to automatically stop recording after this much milliseconds, default value is 8000
lang	string	Language for recognition (e.g., 'en-US', 'fr-FR')
continuous	boolean	Whether to return continuous results or just one
interimResults	boolean	Whether to return interim results
maxAlternatives	number	Maximum number of alternative transcripts to return
serviceURI	string	URL of the speech recognition service (optional)
onstart	(event: Event) => void	Fired when recognition starts
onend	(event: Event) => void	Fired when recognition ends
onerror	(event: any) => void	Fired on error
onresult	(event: any) => void	Fired when a result is received
onsoundstart	(event: Event) => void	Fired when sound is detected
onsoundend	(event: Event) => void	Fired when sound stops
onstart	(event: Event) => void	Fired when speech is detected
onspeechstart	(event: Event) => void	Fired when speech is detected
onspeechend	(event: Event) => void	Fired when speech stops
onnomatch	(event: any) => void	Fired when no match is found
onaudiostart	(event: Event) => void	Fired when audio capture starts
onaudioend	(event: Event) => void	Fired when audio capture ends

Example for parameters and event handlers

const { start, stop, result, isListening, errorMessage } = useSpeechRecognition({
  continuous: true,
  interimResults: true,
  onstart: _onStart,
  onspeechstart: _onspeechstart
});