Audio Message

Pro

Voice-note bubble with a waveform that lights up as it plays. Has a timer, speed chip, scrub to seek, an unplayed dot and an optional word-by-word transcript; your app plays the sound.

Preview

Installation

npx @lumioui/cli add pro/audio-message

Usage

import { AudioMessage } from "@/components/ui/audio-message/audio-message";
<AudioMessage />

Examples

Compact in thread

A fast back-and-forth between two people booking a flat viewing, in neutral ink.

Received bubble

A family group chat.

Sent bubble

Your own voice note on the right in a running-club chat.

Transcript under

A field-research team thread where an interview debrief comes with its transcript folded open underneath, readable without pressing play.

API reference

Prop Type Default
duration* number

Length in seconds.

 —
samples number[]

Amplitudes 0–1, one per bar. Omit to derive a stable shape from seed.

 —
seed number

Seed for the generated waveform shape. Default derives from duration.

 —
bars number

Bar count when generating. Default 30 (md) / 22 (compact).

 —
variant "sent" | "received"

sent — accent bubble on the right; received — neutral bubble on the left.

 "received"
size "md" | "compact"

md — full bubble with speed chip and time; compact — one-line pill for dense threads and reply quotes.

 "md"
playing boolean —
defaultPlaying boolean false
onPlayingChange (playing: boolean) => void —
speed AudioMessageSpeed —
defaultSpeed AudioMessageSpeed 1
onSpeedChange (speed: AudioMessageSpeed) => void —
onSeek (seconds: number) => void

Fires with the new position in seconds after a scrub.

 —
onEnd () => void

Fires when playback reaches the end.

 —
listened boolean

Received notes: false shows the unplayed dot until first play. Default true.

 true
time string

Timestamp in the bubble's corner ("9:41").

 —
transcript string

Text transcript that folds open under the bubble.

 —
defaultTranscriptOpen boolean false
senderName string

Who sent it, for the screen-reader label.

 —
className string —