Waveform Scrubber
An audio waveform progress bar you can drag to seek, with the played region highlighted.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
Generates audio-style waveform bars from a seeded pseudo-random source, highlights the played region with a clipping mask and marks it with a playhead line, and supports click and drag to seek plus a time bubble on hover. A play/pause button and a simulated playback timer are built in, which suits music players, podcasts, and voice message interfaces.
npx shadcn@latest add "https://webberui.com/r/waveform-scrubber.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<WaveformScrubber />
Installation
npx shadcn@latest add "https://webberui.com/r/waveform-scrubber.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/waveform-scrubber.
Usage
import { WaveformScrubber } from "@/components/ui/waveform-scrubber";
<WaveformScrubber
duration={227}
bars={60}
onSeek={(seconds) => console.log("seeked to", seconds)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
duration | number | 180 | Total audio length (seconds), used for the time display and for converting a seek |
bars | number | 56 | Number of waveform bars |
seed | number | 7 | Pseudo-random seed; the same seed produces the same waveform (which avoids a hydration mismatch) |
defaultProgress | number | 0 | Initial playback progress (0–1) |
label | string | "播放進度" (Playback progress) | Accessible name for the track, also used as the slider's aria-label |
onSeek | (seconds: number) => void | — | Callback once a click, drag, or keyboard seek completes, returning the current time in seconds |
onPlayChange | (playing: boolean) => void | — | Callback when the playback state toggles |
className | string | — | Forwarded to the outermost container |
Accessibility
- The waveform track is a
role="slider"and can be focused with the keyboard: the arrow keys jump 5 seconds back and forward,Home/Endjump to the start and end, andSpace/Entertoggles playback - Progress is announced through
aria-valuetextin a "current time / total length" format, witharia-valuenowupdating the seconds in step - The play button provides a "play" / "pause"
aria-labeldepending on its state - When the user has "reduce motion" enabled at the system level, decorative animations such as the time bubble's bounce and the button's scaling are disabled; playback progress is a functional update, so it keeps advancing as usual
- The waveform bars and the playhead are decorative only and both marked
aria-hidden, so they do not interfere with assistive technology