A self-composing synthesizer you can see, played with the Web Audio API.
A sequencer composes as it goes, picking notes from a scale over a slowly changing chord progression, and synthesizes every sound with Web Audio oscillators, filters and envelopes: no samples. Each voice is drawn as rings and ripples that bloom when it plays, and an analyser node feeds a live spectrum. It stays silent until you click, since browsers block sound until you interact.
Try it. Click (or press space) to turn the sound on or off. Move the pointer to change the mood and tempo: further right is brighter, higher is faster.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a generative music toy with JavaScript, the Web Audio API and the HTML canvas element. It should compose a calm, pleasant piece forever and draw what it plays. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a deep night blue.
- Browsers block audio until the user interacts, so create the AudioContext inside a click handler, show a small "Click for sound" hint until then, and let a second click mute it.
- Run a sequencer clock in sixteenth notes at about 90 bpm. Schedule notes slightly ahead on audioContext.currentTime so the timing stays tight.
- Pick a scale (D dorian is a lovely start) and loop a four-chord progression, one chord per bar, building each chord from scale degrees: root, third, fifth and seventh.
- Play three voices with oscillators and gain envelopes: a soft sawtooth pad holding the chord through a lowpass filter, a triangle bass on the root, and a plucky arpeggio cycling through the chord tones.
- Draw a ring that pulses on every note, with a different color for each voice.
Once that works, make it beautiful:
- Add a melody: write two-bar phrases that move mostly by step, land on chord tones on strong beats, repeat with small variations, and rest between phrases.
- Add a gentle kick, snare and hi-hat from oscillators and filtered noise.
- Add a reverb with a ConvolverNode whose impulse response is just stereo noise fading out over three seconds, plus a feedback delay.
- Drive the visuals from the sequencer so they run while muted, and add a live spectrum from an AnalyserNode when the sound is on.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as letting the mouse change the mode and tempo, placing notes on a circle of fifths, or recording the output to a file.
