Live waveform

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

Loudness drawn as it happens: a scrolling history of the microphone (or any live source) or its spectrum, a calm processing state while words are finished, and a number readout under reduced motion. Draws only while there is sound to draw and it is on screen.

Use it for

Feedback while recording or dictating: the person sees they are heard.
A level preview next to a microphone choice.

Not for

A finished recording's shape (waveform).
An agent's speaking and thinking states (bar-visualizer or orb).
Choosing the microphone (mic-selector, which uses this).

Anatomy

canvas (bars)
baseline
edge fade
reduced-motion readout (meter bar and dB)

Variants

mode: scrolling (history moves toward the start), static (spectrum, bars rise in place)
size: any height via height

States

idle (flat baseline, no loop)
active (draws each frame from the source)
muted (baseline, "Muted")
processing (the last frame breathes while words are finished)
reduced motion (a meter and a dB number, 4 updates a second)
off screen (stopped)

Keyboard

None: a live picture (role img). Its controls (record, mute) are separate buttons.

Motion

One canvas, one frame loop, running only while active or processing, on screen and in a visible tab. Reduced motion replaces the moving bars with a level meter and a number.

Props

Prop	Type	Default	Description
`source`	`MediaStream \| LevelSource \| (() => number) \| null`	—	What to listen to: a microphone stream (metered here through an analyser), a level source, or a 0–1 getter.
`active`	`boolean`	`true when a source is given`
`processing`	`boolean`	—	After recording, while the last words are being finished.
`muted`	`boolean`	—
`mode`	`"scrolling" \| "static"`	`"scrolling"`
`height`	`number`	`40`
`barWidth / gap`	`number`	`3 / 2`
`fade`	`boolean`	`true`	Fade the bars out at the edges.
`tone`	`"accent" \| "neutral"`	`"accent"`
`label`	`string`	`"Microphone level"`
`classNames`	`LiveWaveformClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—

Import

import { LiveWaveform } from "@/components/live-waveform/live-waveform";

Get it

Live 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