Resonator
The sound on this page is not a file. It is six oscillators, a filter and a delay line, built in your browser when you press RUN — and the sculpture you are looking at is that same signal, read back through an analyser every frame.
Audio is off until you ask for it. Nothing here autoplays.
Microphone is a separate opt-in and never plays to your speakers.
How it works
An instrument that makes its own input
Audio-reactive pages normally start with a problem: they need a source, and every source is either a file they may not ship or a microphone they are not allowed to ask for. This one sidesteps the whole question. The pad is synthesised — four detuned oscillators through a resonant lowpass, a slow LFO on the cutoff, a tempo-locked pulse on the amplitude — so the page is its own sound source and the visuals are reacting to something real rather than to a looped asset.
The RUN button in the dock is the gate. Until it is
pressed, no AudioContext
exists at all, the analyser reads silence, and the canvas draws a
standby composition from a synthetic envelope. That is deliberate: the
page is worth looking at before it is worth hearing. The microphone is
a second, separate opt-in, routed to the analyser only
and never to the output, so it cannot feed back.
- Technique
- WebAudio oscillator bank + biquad filter + LFO, read through an AnalyserNode (FFT 2048). Canvas2D, four hand-written renderers, additive compositing.
- What it does
- Four visual modes driven by the same live signal: Scope draws the time-domain waveform as a modulated ribbon, Ring wraps the FFT into a radial analyser with a mirrored interior, Lattice recedes the 64 bands into a perspective grid, and Tides sums three phase-offset band envelopes into interference bands.
- Live demo
- The whole frame above is the demo, and the dock is inside the same viewport at every width. Press RUN and the picture changes character within about a second, because the pulse lands every eighth note.
- Good for
- Product pages with a sonic identity, hardware launches, artist and label sites, anything where a visitor should hear a tone before they read a word.
- Combines with
- A static poster state that a chord unlocks, or a scroll position that changes key. The gate is one button; everything downstream is a parameter.
- Complexity
- One oscillator graph, one analyser, one 2D context. No shader, no library, no asset, no network request at any point.
- Performance
- Frame cost is dominated by the 2D composite at device pixel ratio, capped at 2. The 64-band lattice is the heaviest of the four; the readout prints the live frame rate so you can see the cost of the mode you chose.