Waveform Scrubber

Accessible waveform playback with drag and keyboard seeking

A compact media control with deterministic waveform bars, a responsive playhead and complete slider semantics. It can manage playback and progress internally or plug into an external audio source.

Preview

Field recording · July 090:392:22

Play, drag the waveform, or use the arrow keys.

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/waveform-scrubber.json

Usage

Import the component:

import { WaveformScrubber } from "@/components/rohan/waveform-scrubber"

Use it in your code:

<WaveformScrubber
  label="Field recording"
  duration={142}
  defaultProgress={0.28}
  onChange={(progress) => seek(progress)}
/>

Props

Property	Type	Default	Description
progress / defaultProgress	number	0	Controlled or initial normalized playhead position from 0 to 1.
playing / defaultPlaying	boolean	false	Controlled or initial playback state.
duration	number	86	Media duration in seconds.
data	readonly number[]	generated	Normalized waveform bar heights from 0 to 1.
label	string	"Audio preview"	Visible media title and accessible name for the controls.
seekStep	number	5	Seconds moved by each arrow-key press.
onChange	(progress: number) => void	—	Called whenever playback, pointer or keyboard input moves the playhead.
onPlayChange	(playing: boolean) => void	—	Called when the play button changes state.
disabled	boolean	false	Disables playback and seeking interactions.

Components