Skip to content

useSpeechRecognition ​

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

sensors
test coverage
Last changed: last month

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
typescript
import { useSpeechRecognition } from '@siberiacancode/reactuse';

Usage ​

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

Demo ​

Api ​

Parameters

NameTypeDefaultNote
options.continuous?booleanfalseWhether recognition should continue after pauses
options.interimResults?booleanfalseWhether interim results should be provided
options.language?string"en-US"The language for recognition, as a valid BCP 47 tag
options.maxAlternatives?number1The 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 ​

typescript
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
debabin
A
Artem Dereviago
Artem Dereviago

Released under the MIT License.