Voice Input

Voice-to-text control for a composer: idle mic, microphone permission wait, live waveform with timer, transcribing and error.

// Plain markup
import { VoiceInput } from "@shavin/ui";

Idle

Component Source

<VoiceInput state="idle" onStart={() => {}} />

Listening

Summarise the refund tickets

0:07

Component Source

<VoiceInput state="listening" level={0.6} elapsed="0:07" transcript="Summarise the refund tickets" onStop={() => {}} onCancel={() => {}} />

Requesting, transcribing, error

Allow microphone access…

Transcribing…

Summarise the refund tickets

Microphone blocked in this browser.

Component Source

<Flex direction="column" gap="3">
  <VoiceInput state="requesting" />
  <VoiceInput state="transcribing" transcript="Summarise the refund tickets" />
  <VoiceInput state="error" error="Microphone blocked in this browser." onStart={() => {}} />
</Flex>

Props

Prop	Type	Default	Description
state	VoiceInputState	idle	Current state. Default "idle".
level	number	—	Live input level 0-1 that drives the bars while listening. Omit for a gentle idle pulse.
elapsed	string	—	Elapsed recording time, e.g. "0:07".
transcript	string	—	Live or final transcript shown while listening or transcribing.
error	string	—	Message shown when state="error" (e.g. "Microphone blocked").
onDismiss	() => void	—	Dismiss the error and return to idle (error).
onStart	() => void	—	Start recording (idle and error).
onStop	() => void	—	Stop and send (listening).
onCancel	() => void	—	Discard the recording (listening).