/reactuse

useSpeechRecognition

Turns browser speech recognition into React state so voice input can be started, stopped, aborted, and rendered as transcript text.

Usage

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

const speech = useSpeechRecognition();

Example

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

export const VoiceNote = () => {
  const speech = useSpeechRecognition({ language: "en-US" });

  if (!speech.supported) return <div>Not supported</div>;

  return (
    <div>
      <button onClick={() => speech.toggle()}>
        {speech.listening ? "Stop" : "Start"}
      </button>
      <div>Transcript: {speech.transcript}</div>
    </div>
  );
};

continuous:

const speech = useSpeechRecognition({ continuous: true });

interimResults:

const speech = useSpeechRecognition({ interimResults: true });

language:

const speech = useSpeechRecognition({ language: "ru-RU" });

maxAlternatives:

const speech = useSpeechRecognition({ maxAlternatives: 3 });

abort:

const speech = useSpeechRecognition();
speech.abort();

grammars:

const speech = useSpeechRecognition({ grammars });

onStart:

const speech = useSpeechRecognition({ onStart: () => console.log("start") });

onEnd:

const speech = useSpeechRecognition({ onEnd: () => console.log("end") });

onError:

const speech = useSpeechRecognition({
  onError: (error) => console.error(error),
});

onResult:

const speech = useSpeechRecognition({
  onResult: (event) => console.log(event),
});

Notes

• Hook uses the SpeechRecognition API.

Type Declarations

export interface UseSpeechRecognitionOptions {
  continuous?: SpeechRecognition["continuous"];
  grammars?: SpeechRecognition["grammars"];
  interimResults?: SpeechRecognition["interimResults"];
  language?: SpeechRecognition["lang"];
  maxAlternatives?: SpeechRecognition["maxAlternatives"];
  onEnd?: () => void;
  onError?: (error: SpeechRecognitionErrorEvent) => void;
  onResult?: (event: SpeechRecognitionEvent) => void;
  onStart?: () => void;
}
export interface UseSpeechRecognitionReturn {
  error: SpeechRecognitionErrorEvent | null;
  final: boolean;
  listening: boolean;
  recognition?: SpeechRecognition;
  supported: boolean;
  transcript: string;
  start: () => void;
  stop: () => void;
  abort: () => void;
  toggle: (value?: boolean) => void;
}
export declare const useSpeechRecognition: (
  options?: UseSpeechRecognitionOptions
) => UseSpeechRecognitionReturn;