Waveform

A React component in Beamline's Voice & audio category.

The shape of a recording: one bar per slice of loudness, fitted to any width, with the played part in the accent, unmeasured slices hatched and a loading state. Peaks can be decoded from the file in the browser.

Use it for

Showing a recording's shape in a list, a message or a player.
Playback progress over the shape (pass progress); to seek on it, use scrub-bar with peaks.

Not for

Live microphone input (live-waveform).
An agent's speaking state (bar-visualizer or orb).
Seeking (scrub-bar, which draws this waveform when given peaks).

Anatomy

bars (resampled to the width)
played overlay (clipped, accent)
unmeasured slices (hatched stubs)

Variants

variant: mirror (centred), bars (from the baseline)
tone: accent, neutral

States

loading (skeleton bars)
empty (emptyLabel)
static
with progress
unmeasured slices

Keyboard

None: it is a picture (role img with a label). Seeking lives in scrub-bar.

Motion

None. Progress moves by clipping one overlay, so following playback repaints nothing else; the loading skeleton shimmers only while loading and not under reduced motion.

Props

Prop	Type	Default	Description
`peaks` (required)	`(number \| null)[]`	—	Loudness 0–1 per slice, any count (resampled by maximum to fit); null for a slice that was not measured.
`progress`	`number`	—	Played fraction 0–1.
`variant`	`"mirror" \| "bars"`	`"mirror"`
`tone`	`"accent" \| "neutral"`	`"accent"`	Colour of the played part.
`height`	`number`	`40`
`barWidth / gap`	`number`	`2 / 2`
`loading`	`boolean`	—
`emptyLabel`	`string`	`"No audio"`
`label`	`string`	—	Accessible name, e.g. "Waveform of the billing call".
`classNames`	`WaveformClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—

Import

import { Waveform } from "@/components/waveform/waveform";

Get it

Waveform is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent