useSpeechRecognition

Hook that provides a streamlined interface for incorporating speech-to-text functionality

browser

low

test coverage

Last changed: 2 months ago

TIP

This hook uses window.SpeechRecognition browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library

CLI

Manual

import { useSpeechRecognition } from '@siberiacancode/reactuse';

Usage

const { supported, value, recognition, listening, error, start, stop, toggle  } = useSpeechRecognition();

Demo

source

Api

Parameters

Name	Type	Default	Note
options.continuous?	boolean	false	Whether recognition should continue after pauses
options.interimResults?	boolean	false	Whether interim results should be provided
options.language?	string	"en-US"	The language for recognition, as a valid BCP 47 tag
options.maxAlternatives?	number	1	The maximum number of alternative transcripts to return
options.grammars?	SpeechGrammarList	-	A list of grammar rules
options.onStart?	() => void	-	Callback invoked when speech recognition starts
options.onEnd?	() => void	-	Callback invoked when speech recognition ends
options.onError?	(error: SpeechRecognitionErrorEvent) => void	-	Callback invoked when an error occurs during recognition
options.onResult?	(event: SpeechRecognitionEvent) => void	-	Callback invoked when recognition produces a result

Returns

UseSpeechRecognitionReturn

Type declaration

interface UseSpeechRecognitionOptions {
  /** If true, recognition continues even after pauses in speech. Default is false */
  continuous?: SpeechRecognition['continuous'];
  /** A list of grammar rules */
  grammars?: SpeechRecognition['grammars'];
  /** If true, interim (non-final) results are provided as the user speaks */
  interimResults?: SpeechRecognition['interimResults'];
  /** The language in which recognition should occur. Must be a valid BCP 47 language tag (e.g., "en-US", "ru-RU") */
  language?: SpeechRecognition['lang'];
  /** The maximum number of alternative transcripts returned for a given recognition result. Must be a positive integer */
  maxAlternatives?: SpeechRecognition['maxAlternatives'];
  /** Callback invoked when speech recognition ends */
  onEnd?: () => void;
  /** Callback invoked when an error occurs during recognition */
  onError?: (error: SpeechRecognitionErrorEvent) => void;
  /** Callback invoked when recognition produces a result */
  onResult?: (event: SpeechRecognitionEvent) => void;
  /** Callback invoked when speech recognition starts */
  onStart?: () => void;
}

interface UseSpeechRecognitionReturn {
  /** The error state */
  error: SpeechRecognitionErrorEvent | null;
  /** The final transcript */
  final: boolean;
  /** Whether the hook is currently listening for speech */
  listening: boolean;
  /** The speech recognition instance */
  recognition?: SpeechRecognition;
  /** Whether the current browser supports the Web Speech API */
  supported: boolean;
  /** The current transcript */
  transcript: string;
  /** Begins speech recognition */
  start: () => void;
  /** Ends speech recognition, finalizing results */
  stop: () => void;
  /** Toggles the listening state */
  toggle: (value?: boolean) => void;
}

Source

Source • Demo

Contributors

D

debabin

A

Artem Dereviago