Waveform

Pro

Audio scrubber that shows playback as a filling waveform. Bars near the playhead grow and brighten as you drag, and chapter marks appear as small gaps in the wave.

Preview

Installation

npx @lumioui/cli add pro/waveform

Usage

import { Waveform } from "@/components/ui/waveform/waveform";
<Waveform />

API reference

Prop Type Default
value number

Controlled position (min..max). Omit for uncontrolled via defaultValue, or pass value alone for a static progress display.

 —
defaultValue number

Uncontrolled initial position.

 —
onValueChange (value: number) => void

Fires while scrubbing — only when the stepped value changes, never per touch-move frame.

 —
onSlidingComplete (value: number) => void

Fires once when the finger lifts, with the settled value (seek here).

 —
onSlidingStart () => void

Fires when a scrub starts — pause time updates while it runs.

 —
min number 0
max number 100
step number

Granularity of emitted values. Default 1.

 1
bars number

Bar count. Default 44.

 44
scrubbable boolean

Tap/drag to scrub. Default true — set false for a purely visual progress read-out.

 true
playing boolean

Playback is running: the head carries a gentle halo and advances linearly across each updateInterval instead of stepping. Pausing dims the halo in 120ms. Default false (the head glides to each new value).

 false
updateInterval number

How often value updates during playback, in ms. Default 1000.

 1000
marks number[]

Chapter / phrase boundaries (values in min..max). Each becomes a gap in the bars with a dot that switches on once it is played.

 —
disabled boolean false
className string

Extra classes on the outer container (height, width).

 —
barClassName string

Extra classes on every bar.

 —
fillClassName string

Filled (played) portion color. Default bg-foreground.

 "bg-foreground"
trackClassName string

Unfilled portion color. Default bg-foreground/25.

 "bg-foreground/25"