jatui

AudioWaveform

Interactive audio waveform visualizer with trim controls and theme-aware colors

Renders an audio file as an interactive waveform canvas. Click to seek; the progress bar follows playback. Uses DaisyUI semantic color tokens so it re-skins with the theme.

Default (interactive)

Loading waveform...
0:00 / 0:00

Read-only (non-interactive)

Loading waveform...
0:00 / 0:00

With trim controls

Loading waveform...
0:00 / 0:00

Custom colors

Loading waveform...
0:00 / 0:00

Props

PropTypeDefaultDescription
audioUrlstring-URL of the audio file
heightnumber80Canvas height in px
waveColorstring"neutral"DaisyUI token for the waveform
progressColorstring"accent"DaisyUI token for the played portion
interactivebooleantrueAllow click-to-seek
showTrimControlsbooleanfalseShow trim handle overlays
onTrim(start, end) => void-Called after dragging trim handles
providedDurationnumber-Skip the audio metadata fetch (already known)