Audio Visualizers

Waveform River

Mirrored cyan waveform ribbon scrolls right-to-left on dark; glowing dot marks the live head. Click LIVE to switch from synthetic signal to microphone.

canvasmedium complexitymoderate motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Audio visualizer hero, music/podcast pages, or ambient looping background where a waveform aesthetic fits.

When not to

Contexts where microphone access prompts would surprise the user — demo runs synthetic by default, but the LIVE button triggers getUserMedia.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change accent color from cyan (#22d3ee) to magenta (#e040fb) in all occurrences, and slow scroll by changing `t+=0.024` to `t+=0.012`.

Safe to edit

accent color (#22d3ee, 6 occurrences)
scroll speed (t += 0.024)
ribbon height scale (H*0.86)
column count (COLS=160)
leading-head glow radius (2.2 + eng[hi]*2.6)
synth LFO frequencies (0.31, 0.17)

Keep intact

ring-buffer head pointer (head=(head+1)%COLS)
visibilitychange pause/resume
prefers-reduced-motion static frame branch
DPR-aware canvas sizing

Known limitations

Live mic stream is never disconnected — no cleanup when toggled
Background color hardcoded in both CSS and canvas fillRect — must change both
Synthetic signal patterns repeat over long observation windows

waveformaudiocanvasring-bufferambientmicrophonescrolling

More Audio Visualizers components

Spectrum Bars56 mirrored chartreuse-gold frequency bars animate with gravity peak-hold caps on a dark canvas; a "live" button switches from synth simulation to real…
Radial Spectrum96 cyan radial bars radiate from a bass-driven pulsing core around a slowly rotating ring; driven by a synthetic signal or live mic input on click.
OscilloscopeCyan phosphor-glow waveform sweeps across a faint scope grid with ghosting persistence trail; click to upgrade to live microphone input.
VU MeterCream analog VU meter with a spring-damped needle, dB scale, red peak zone, and peak-hold pip. Synth signal by default; click switches to live mic.
Lissajous ScopeCyan Lissajous figure drifts and rotates on a dark scope grid with phosphor trail decay and a glowing beam head; a Live button upgrades to real mic input.
Beat BloomCyan concentric rings bloom outward and particles burst radially on detected bass beats from a synth signal; a breathing center dot pulses continuously.