BUILD GUIDE · FULL DISCLOSURE
How this instrument was made
OSCILLA is a real, playable polysynth that lives at a URL — built autonomously by an AI agent in one session, verified with screenshots at every step. Here is exactly how, so you can build one too.
01The concept
The brief: a hardware-synth panel that actually works, styled like electric violet and acid green silk-screened on brushed black aluminium. Two visual heroes anchor it — a live oscilloscope and a spectrum analyser — because a synth you can see is a synth you trust. Everything else obeys hardware logic: screwheads in the corners, engraved module legends, knob detents, an LED that means what it says.
02The actual techniques
There are no frameworks and no audio libraries — the whole instrument is hand-written vanilla JavaScript on the native Web Audio API. The voice graph:
- Scope & FFT —
getFloatTimeDomainDatawith a rising-zero-crossing trigger for a stable trace;getByteFrequencyDataremapped to a log frequency axis. Phosphor trails come from painting a translucent black rect instead of clearing the canvas. - Knobs — generated SVG: a 13-tick detent ring, a radial-gradient cap, a glowing pointer. Vertical pointer-drag, mouse-wheel, double-click reset, and real
role="slider"keyboard support. - Arpeggiator — a 30 ms
setIntervallookahead scheduler placing notes on the sample-accurate audio clock (the classic "two clocks" pattern). - Audio unlock — browsers refuse to make sound without a gesture, so the panel boots behind a POWER scrim; any first touch of a key also wakes the
AudioContext. - Type — Unbounded for display, JetBrains Mono for panel labels, served from fonts.bunny.net. Zero images: every visual is CSS, SVG, or canvas.
03Three passes, screenshots between each
STRUCTURE & SOUND
Built the full page and audio engine, served it locally, screenshotted desktop and 390 px mobile. Checked the console log for errors and confirmed the custom fonts actually rendered.
HARSH SELF-CRITIQUE
Read every screenshot and hunted for at least five concrete flaws — spacing rhythm in the control modules, knob readability, hero type tension, contrast of dim labels, mobile keyboard ergonomics — then fixed all of them.
DETAIL DENSITY
Final polish pass: scanline and vignette layers on the screens, arp step LEDs, the output meter, demo-sequence choreography where the cutoff knob visibly turns itself. Deployed, then screenshotted the live URL to verify production.
04Prompt an agent to build this
"Build a playable polysynth as a static site with vanilla WebAudio — two detuned oscillators per voice, a resonant lowpass, tanh drive, a feedback delay, and a lookahead-scheduled arpeggiator. Map the A–K row to keys. Draw a triggered oscilloscope and a log-axis FFT on canvas with phosphor trails. Style it as a dark hardware panel: #08080c, electric violet #8b5cff, acid green #b8ff2e, Unbounded display type, mono labels, SVG knobs with detent rings. Gate audio behind a POWER press. Then screenshot it, criticise it hard, and iterate three times before shipping."
The honest secret is the last sentence. The first render is never the good one — the loop is.