Waveform Scrubber: React + Tailwind Component

An audio waveform progress bar you can drag to seek, with the played region highlighted.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/waveform-scrubber.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Total audio length (s)duration

180

Waveform bar countbars

Waveform seedseed

Initial playback progressdefaultProgress

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<WaveformScrubber/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/waveform-scrubber.en.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"` (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/End jump to the start and end, and Space/Enter toggles playback
Progress is announced through aria-valuetext in a "current time / total length" format, with aria-valuenow updating the seconds in step
The play button provides a "play" / "pause" aria-label depending 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

Waveform Scrubber