Usage
Voice input for a chat composer. It wraps speech recognition with microphone level, start and stop cues, and optional interim text in a ChatComposerInput. Check isSupported before offering the control. A browser without speech recognition reports false and does not listen. Sustained loud speech turns the transcript to upper case.
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Pass inputRef when the words should appear in the composer. The hook inserts each final transcript there and still calls onResult. |
| Do | Disable the control when isSupported is false, and say that this browser cannot take voice input. |
| Do | Handle onError. It is the only signal that microphone permission was refused. |
| Don't | Call the browser SpeechRecognition API beside this hook. Use useSpeechRecognition only when the composer behavior is not wanted. |
Parameters
| Param | Type | Description |
|---|---|---|
options | Speech and composer options. Omit them to listen in the provider locale until stop is called. | |
options.lang | string | BCP-47 language tag for recognition. |
options.continuous | boolean (default: true) | Whether recognition continues until stop or abort. |
options.interimResults | boolean (default: true) | Whether partial transcripts are reported before the final one. |
options.audioContext | AudioContext | A shared audio context for the microphone level and cues. Omit it to use the hook's own context. |
options.transformTranscript | (transcript: string) => string | Rewrites each transcript before it is reported, before the upper-case rule for loud speech. |
options.inputRef | React.RefObject< | null> | The composer handle. When set, the hook focuses that composer, shows each partial transcript there, and inserts each final transcript. onResult still runs, so do not insert that text again. |
options.hasSounds | boolean (default: false) | Play a short cue when recognition starts and stops. |
options.onResult | (transcript: string) => void | Called with each final transcript. |
options.onTranscript | (transcript: string, isFinal: boolean) => void | Called for each partial transcript and each final one. |
options.onError | (error: {error: string, message?: string}) => void | Called when recognition fails, including when microphone permission is refused. |
options.onStart | () => void | Called when recognition starts. |
options.onEnd | () => void | Called when recognition ends. |
Returns
| Field | Type | Description |
|---|---|---|
| isSupported | boolean | Whether this browser provides speech recognition. |
| isListening | boolean | Whether recognition is active. |
| isSpeaking | boolean | Whether the microphone currently hears speech. |
| interimTranscript | string | The partial transcript, empty when none is pending. |
| volume | number | Microphone level from 0 to 1 while listening. |
| bands | number[] | Frequency band levels from low to high, each from 0 to 1. |
| rawBands | number[] | The same bands before calibration. |
| start | () => void | Start recognition. |
| stop | () => void | Stop recognition and wait for the final transcript. |
| abort | () => void | Stop recognition immediately. |
| toggle | () => void | Start when idle, and stop when listening. |
Examples
Common configurations, variations, and states.A composer filled by useChatDictation in the provider locale. Partial words show in the composer as ghost text, and each finished phrase is inserted there once. The control stays off when the browser has no speech recognition.
Use with shadcn
Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx.
This install URL expires with the draft preview.bash