Showroom · Make-of

How Waveform was made

A listening room where sound becomes land: every ridge on screen is one real snapshot of the frequency spectrum, and the song you drop in never leaves your browser.

What it demonstrates

Genuine audio reactivity — the terrain is a measurement, not choreography. An AnalyserNode reads the playing audio's spectrum, and every 120 ms one snapshot of 88 log-spaced bands becomes the newest ridge while the older ones recede toward an ember horizon. Bass piles up on the left, treble feathers the right; pause the song and the landscape holds its shape. It also demonstrates a privacy posture worth copying: a local file is decoded entirely in the browser through an object URL, so the honest on-page claim "your audio never leaves this tab" can be verified in the network panel.

Techniques, honestly named

• AnalyserNode ridgeline terrain — getByteFrequencyData sampled into 88 log-spaced bands (40 Hz–14 kHz), each snapshot pushed into a 32-row history drawn back-to-front on a 2D canvas; every row is filled with the background color below its line, which is the whole occlusion trick of a joyplot.
• Gesture-gated audio — no AudioContext exists until you press a button or drop a file, and a Stop control stays visible whenever sound runs.
• Local file playback — an object URL feeds an <audio> element wrapped in a MediaElementAudioSourceNode; there is no upload path in the code at all. Decode failures get a plain-language error, not a broken page.
• A synthesized built-in track — the "tide" is Web Audio oscillators only: a detuned D-minor triangle swell through a lowpass, a sub sine, looped noise through a drifting bandpass for surf, and sparse plucks into a darkened feedback delay. No recordings, so nothing copyrighted ships with the page.
• Honest idle state — with nothing playing, the terrain idles on drifting synthetic dunes and the status line says exactly that. Silence is never dressed up as a spectrum.
• Respectful plumbing — requestAnimationFrame only, paused when the tab hides; prefers-reduced-motion swaps the flow for one calm redraw per second; devicePixelRatio capped at 2; every control keyboard operable; live-region status updates for screen readers.

Recreate it