Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA microphone button or recording bar with a live waveform, timer, discard and send, plus a hook that reads the real microphone level.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
The component does not record or transcribe audio. Use your own recorder or speech API in onStart and onStop.
| Prop | Type | Default | Description |
|---|---|---|---|
state | "idle" | "listening" | "processing" | - | Controlled state. Uncontrolled inputs go idle, listening, then idle. |
onStart | () => void | - | Called when recording should begin. |
onStop | () => void | - | Called when the person finishes and wants the audio used. |
onCancel | () => void | - | Called when the person discards the recording. |
level | number | 0 | Loudness from 0 to 1. Drives the waveform and the button's glow. |
variant | "button" | "bar" | "button" | A round microphone button, or a recorder bar with waveform and timer. |
duration | number | - | Seconds recorded. When omitted the component times itself. |
processingLabel | string | "Transcribing…" | Text shown while processing. |
label | string | "Start voice input" | Accessible name (and bar text) of the start button. |
Also accepts all <div> props except children and onChange.
useMicrophoneLevel(active: boolean): { level: number; error: string | null }
Asks for the microphone only when active turns true, then reports loudness from 0 to 1 with the Web Audio API. If permission is refused, error holds the reason. The stream is stopped when active turns false or the component unmounts.