Waveform Scrubber

Decodes an audio file into peak data and renders it as a bar waveform on canvas. Click or drag to seek. Includes play/pause, speed toggle (0.5x-2x), and a volume slider. Shows current time and duration. Falls back to a sine silhouette if decoding fails.

waveform-scrubber-preview

Generating audio...

Why it helps: A waveform scrubber gives users precise visual control over audio playback. The bar-based visualization makes it easy to identify sections of a track, and the speed/volume controls add a complete mini-player experience.

Also good to know:

-Decoding the full audio file upfront may be slow for large files
-Peak data is stored in memory as a Float32Array which scales with bar count
-The audio element is created in JS rather than declaratively in JSX

Source

components/live/WaveformScrubber.tsx

// Loading source...

Usage

example.tsx

import { WaveformScrubber } from "@/components/live/WaveformScrubber";

<WaveformScrubber
  src="/audio/track.mp3"
  title="Demo track"
  subtitle="Click the waveform to seek"
  accent="#ff7a2f"
  showSpeed={true}
  showVolume={true}
/>
import { WaveformScrubber } from "@/components/live/WaveformScrubber";

<WaveformScrubber
  src="/audio/track.mp3"
  title="Demo track"
  subtitle="Click the waveform to seek"
  accent="#ff7a2f"
  showSpeed={true}
  showVolume={true}
/>

Props

src

string

Audio URL. Must be same-origin or CORS-enabled.

title"Demo track"

string

Title shown above the waveform.

subtitle"Click the waveform to seek"

string

Subtitle shown above the waveform.

height96

number

Height of the waveform canvas in px.

bars96

number

Number of bars in the waveform.

accent"#ff7a2f"

string

Accent color for the played portion.

muted"rgba(255,255,255,0.16)"

string

Color of the unplayed portion.

showSpeedtrue

boolean

Show the speed toggle row.

showVolumetrue

boolean

Show the volume slider.

autoplayfalse

boolean

Start playing automatically when in view.

onEnded

() => void

Called when the audio ends.