Skip to content

useSpeechRecognition

Category
Export Size
630 B
Last Changed
5 days ago

Reactive SpeechRecognition

Demo

Usage

tsx
import { 
useSpeechRecognition
} from '@reause/core'
const {
isSupported
,
isListening
,
isFinal
,
result
,
confidence
,
start
,
stop
,
} =
useSpeechRecognition
()
start
()
// ...
stop
()

The confidence value tracks the confidence value of the latest result, between 0 and 1.

Options

The following shows the default values of the options, they will be directly passed to SpeechRecognition API.

tsx
useSpeechRecognition
({
lang
: 'en-US',
interimResults
: true,
continuous
: true,
})

Type Declarations

Toggle
ts
export interface UseSpeechRecognitionOptions extends ConfigurableWindow {
    continuous?: boolean;
    interimResults?: boolean;
    lang?: string;
    maxAlternatives?: number;
}

export interface UseSpeechRecognitionReturn {
    isSupported: boolean;
    isListening: boolean;
    setIsListening: Dispatch<SetStateAction<boolean>>;
    isFinal: boolean;
    recognition: SpeechRecognition | undefined;
    result: string;
    confidence: number;
    error: SpeechRecognitionErrorEvent | Error | undefined;
    setError: Dispatch<SetStateAction<SpeechRecognitionErrorEvent | Error | undefined>>;
    toggle: (value?: boolean) => void;
    start: () => void;
    stop: () => void;
}

interface SpeechRecognition extends EventTarget {
    continuous: boolean;
    grammars: unknown;
    interimResults: boolean;
    lang: string;
    maxAlternatives: number;
    onaudioend: ((this: SpeechRecognition, ev: Event) => unknown) | null;
    onaudiostart: ((this: SpeechRecognition, ev: Event) => unknown) | null;
    onend: ((this: SpeechRecognition, ev: Event) => unknown) | null;
    onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => unknown) | null;
    onnomatch: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => unknown) | null;
    onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => unknown) | null;
    onsoundend: ((this: SpeechRecognition, ev: Event) => unknown) | null;
    onsoundstart: ((this: SpeechRecognition, ev: Event) => unknown) | null;
    onspeechend: ((this: SpeechRecognition, ev: Event) => unknown) | null;
    onspeechstart: ((this: SpeechRecognition, ev: Event) => unknown) | null;
    onstart: ((this: SpeechRecognition, ev: Event) => unknown) | null;
    start: () => void;
    stop: () => void;
    abort: () => void;
}

interface SpeechRecognitionErrorEvent extends Event {
    readonly error: string;
    readonly message: string;
}

export function useSpeechRecognition(options?: UseSpeechRecognitionOptions): UseSpeechRecognitionReturn

Source

Source · Demo · VueUse

Contributors

hairyf

Changelog

v0.1.0 on
2f402 - fix(core): resolve useSpeechRecognition audit findings (#641)
8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)

Released under the MIT License. v0.1.8