Audio Recorder

Pro

Voice-note recorder controls: hold the mic for a live timer, slide left to throw the take away, or slide up to lock hands-free with a level meter. Your app does the recording.

Preview

Installation

npx @lumioui/cli add pro/audio-recorder

Usage

import { AudioRecorder } from "@/components/ui/audio-recorder/audio-recorder";
<AudioRecorder />

Examples

Chat composer

A messaging thread in green.

Voice memo

A voice-memo app, ink with the semantic record red.

Push to talk

A ski-patrol crew radio in green.

API reference

Prop Type Default
mode "hold" | "toggle"

hold — press and hold to record, release to send (default). toggle — tap to start, tap to stop.

 "hold"
layout "inline" | "hero"

inline — composer strip with a 44pt mic (default). hero — large waveform, timer and button.

 "inline"
level number

Live input level 0–1 from your recorder's metering; each update appends a bar and drives the mic halo.

 —
maxDuration number

Seconds — recording auto-sends at this length.

 —
lockable boolean

Inline hold: allow sliding up to lock hands-free. Default true.

 true
onRecordStart () => void

Fires the moment recording starts — start your recorder.

 —
onRecordEnd (seconds: number) => void

Fires with the length in seconds when the take is sent.

 —
onRecordCancel () => void

Fires when the take is discarded (slide to cancel, trash, or a too-short hold).

 —
onLock () => void

Fires when an inline hold is locked by sliding up.

 —
holdHint string

Hint shown after a too-short tap in hold mode.

 "Hold to record
slideLabel string

Label shown while holding. Default "Slide to cancel".

 "Slide to cancel"
idleLabel string

Hero idle caption. Defaults by mode.

 —
bars number

Bars in the level meter. Default 28 inline / 44 hero.

 —
disabled boolean —
children React.ReactNode

Inline idle content left of the mic (your text field). Hidden while recording.

 —
accessibilityLabel string

Screen-reader name for the record button. Default "Record voice message".

 "Record voice message"
className string —