Loading…

Voice Input

beta

A microphone toggle for talking to an assistant: records, shows what the mic hears and for how long, and streams a live transcript where the browser can.

AI
1 file
No extra npm packages
Accessibility notes
Draws on a canvas

Playground

Installation

The CLI installs audio-visualizer and button as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add voice-input

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { VoiceInput } from "@/components/ui/voice-input";

Examples

Every example the tests run, live and operable, side by side.

Default
With Transcript

API

Generated from the component's own types, so a prop cannot appear here without existing.

<VoiceInput>

Prop	Type	Default
`disabled`	`boolean`	`false`
`label` The button's accessible name. Default "Voice input".	`string`	`"Voice input"`
`lang` Language for transcription, e.g. "en-GB". Defaults to the page's.	`string`	—
`maxDuration` Stop on their own after this many seconds.	`number`	—
`messages` Words, for other languages.	`Partial<VoiceInputMessages>`	—
`onError` Told about anything that went wrong; the message is also shown.	`(error: VoiceInputError) => void`	—
`onRecordingChange` Told when recording starts and stops.	`(recording: boolean) => void`	—
`onRecordingComplete` Called with the recorded audio when a recording ends (not when it is cancelled).	`(audio: Blob, durationMs: number) => void`	—
`onTranscript` The transcript so far, and whether this part is final.	`(text: string, isFinal: boolean) => void`	—
`transcribe` Stream a live transcript through `onTranscript`, where the browser supports it.	`boolean`	`false`
`visualizer` How the visualizer draws. Default "bars".	`"bars" \| "wave" \| "orb"`	`"bars"`

Plus every attribute of <div> except onError.

Accessibility

A toggle button (aria-pressed) whose name never changes, so its state is read rather than its label swapping. Recording is said in words beside the visualizer and timer, and a status region announces start, stop with the duration, cancel and every error. Escape cancels a recording without keeping it. Permission denied, no microphone and an unsupported browser each get a visible message.

Quality

Measured from the source and its tests at build time.

All scores

7/7

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

disabled

boolean

false

label

The button's accessible name. Default "Voice input".

string

"Voice input"

lang

Language for transcription, e.g. "en-GB". Defaults to the page's.

string

—

maxDuration

Stop on their own after this many seconds.

number

—

messages

Words, for other languages.

Partial<VoiceInputMessages>

—

onError

Told about anything that went wrong; the message is also shown.

(error: VoiceInputError) => void

—

onRecordingChange

Told when recording starts and stops.

(recording: boolean) => void

—

onRecordingComplete

Called with the recorded audio when a recording ends (not when it is cancelled).

(audio: Blob, durationMs: number) => void

—

onTranscript

The transcript so far, and whether this part is final.

(text: string, isFinal: boolean) => void

—

transcribe

Stream a live transcript through onTranscript, where the browser supports it.

boolean

false

visualizer

How the visualizer draws. Default "bars".

"bars" | "wave" | "orb"

"bars"