Showroom · Make-of

How Resonance was made

A synthesizer, a composer, and a visualization — all built from scratch in one HTML file, with no audio files and no libraries.

What it demonstrates

That a browser can be an instrument. The page ships no sound; it ships rules. A small scheduler picks notes from a scale at unhurried random intervals, and a synth graph — oscillators, filter, delay, generated reverb — performs them. Because the music is rules, it never repeats and never ends. And because the visual reads the real signal, it cannot lie about what you are hearing: silence draws a flat circle.

Techniques, honestly named

• Gesture-gated audio — no AudioContext exists until you press Play, and a Stop control stays visible the whole time sound runs.
• Web Audio synthesis — every note is two slightly detuned oscillators through an envelope; a feedback DelayNode makes echoes; the reverb is a ConvolverNode whose impulse response is three seconds of decaying noise generated on the spot.
• Lookahead scheduler — a timer schedules notes 0.8 s ahead on the audio clock, the standard fix for JavaScript timer jitter.
• Three moods as data — Dawn, Drift, and Undertow are just parameter sets (scale, drones, envelope, filter, delay); switching crossfades between them live.
• AnalyserNode-driven ring — the centerpiece is the actual time-domain waveform bent into a circle, detrended so it closes seamlessly; the glow follows the low-frequency bins. It is a measurement, not an animation.
• Respectful plumbing — rAF loop pauses when the tab hides, prefers-reduced-motion gets a near-static rendering, devicePixelRatio is capped at 2, and every control is keyboard operable.

Recreate it