Three.js From Zero · Article s9-10

S9-10 Music Jam Experience

Season 9 · Article 10 · Finale

The Music Jam Experience

Everything from S9 stacked: procedural music + beat-locked visuals + spatial audio + microphone input + audio-reactive shader. A "metaverse concert" prototype.

🏁 Season 9 finale — Real-Time Systems & Audio concludes

The demo

Click Start jam. Three synth avatars around a stage play a 4/4 groove. Your mic input adds to the mix (optional). Visuals are audio-reactive. Each synth is spatialized — hear them from their 3D position (headphones).

Click Start jam

What's inside

S9-01 Web Audio graph: kick + snare + lead + master.
S9-02 PositionalAudio for each synth avatar.
S9-03 AnalyserNode drives ambient glow + sphere scale.
S9-04 ConvolverNode puts everything in a virtual club space.
S9-05 getUserMedia mic piped in optionally.
S9-08 Everything synthesized — no samples.
S9-09 Beat-locked scheduling. BPM = 110.

Architecture

mic (optional)  →
kick_osc   →  kick_panner_at_(3,0,0)   →  send:dry + send:reverb
snare_noise→  snare_panner_at_(-3,0,0) →  send:dry + send:reverb
lead_osc   →  lead_panner_at_(0,0,-3)  →  send:dry + send:reverb

send:dry  → master
send:reverb → convolver → master

master    → analyser → destination
         └→ analyser output → shader uniforms

Season 9 recap

Web Audio basics. Spatial audio. Audio-reactive visuals. Convolution reverb. WebRTC voice + video. Network sync. Procedural audio. Music sync. Jam experience.

Ten articles covering the sound + networking side of 3D. Essential for any social or performative experience.

Season 10 next

Cutting Edge & Creative. AI-driven rendering. Generative 3D. Neural radiance fields (NeRF) in browser. Gaussian splatting. LLM-as-NPC. Computer-vision-in-3D. The 2026-2027 frontier.