Sebastian Gomez
The Edge Is Inevitable: Why We Built BrowserDJ AI with Gemma 4 and Google Antigravity
Live Station: seagomezar.github.io/djintheedge
Source Code: github.com/seagomezar/djintheedge
Eventually, models running on consumer devices will match the capabilities that currently require dedicated cloud infrastructure.
When that shift happens, the default architecture of generative software will change with it. Today, the standard pattern is to rent cloud GPUs, place a high-latency POST request between the user and the model, and stream back static assets. But the browser is already a sandboxed, zero-install, cross-platform runtime that offers three things cloud APIs cannot guarantee together:
- Total privacy: No prompt, keystroke, or audio sample leaves the user's machine.
- True offline resilience: Zero network calls, zero API tokens, and immunity to server outages or rate limits.
- Immediate response: When inference and audio synthesis run in the same local execution context, latency drops from seconds to milliseconds.
We built BrowserDJ AI (Model AP-808) as a proof of concept to demonstrate what edge AI in the browser can do today—and to inspire developers and creators to explore what happens when you treat the browser as a self-contained, live instrument.
Procedural Sound Instead of Static Audio
Most AI music tools on the web behave like vending machines: you enter a prompt, wait several seconds, and receive a pre-baked audio file. If you want the tempo slightly faster or the bass drum muted, you must submit a new prompt and wait again. There is no performance, no modulation, and no tactile control.
BrowserDJ AI takes the opposite approach: generative parameterization of live procedural synthesis.
The model does not generate sound files. Instead, it translates natural language into a deterministic DSP contract—a structured JSON state that drives the browser’s native Web Audio API:
[ User Prompt: "techno beat at 135 bpm with square wave and low filter" ]
│
▼
┌─────────────────────────────────────────────────┐
│ In-Browser SLM (LiteRT-LM / WebGPU) │
│ Gemma 4 Local On-Device Inference │
│ + Deterministic Semantic Parser │
└────────────────────────┬────────────────────────┘
│
▼ (Stateful DSP Contract)
┌─────────────────────────────────────────────────┐
│ Stateful Loop Manager │
│ (Preserves existing tempo, scale & mutes) │
└────────────────────────┬────────────────────────┘
│
▼
┌─────────────────────────────────────────────────┐
│ Procedural Audio Engine │
│ 16-Step TR-808 Clock • SVF Lowpass Filter │
│ Square/Saw/Sine Oscillators • Delay & Reverb │
└────────────────────────┬────────────────────────┘
│
▼
[ 48 kHz Stereo Output Stream ]When a user asks for "more reverb" or "faster hats", the engine does not start from scratch. It mutates only the targeted track while preserving the underlying key, tempo, and synth melody. Because synthesis happens procedurally inside the browser tab, the change is instantaneous.
Under the Hood: The Engineering Fundamentals
To understand why BrowserDJ AI feels like a physical instrument rather than a web page, you have to look at the three foundational layers operating under the hood:
1. The Web Audio Graph & Sample-Accurate Lookahead Clock
In browser audio, relying on standard JavaScript timers like setTimeout or setInterval results in rhythmic drift and audible stutter because the main thread gets blocked by DOM recalculations.
BrowserDJ AI solves this using the Web Audio API lookahead scheduling pattern:
- An AudioContext runs at a fixed 48 kHz sample rate.
- A high-priority scheduler routine runs every 25 milliseconds, scanning ahead into the audio timeline by 100 milliseconds and queuing events directly against the hardware clock (
audioCtx.currentTime). - Kick Drum Synthesis: Built using an
OscillatorNodeexecuting a rapid exponential pitch drop (from 150 Hz down to 38 Hz over 0.08 seconds) layered with a fast gain burst to create physical transient punch without external WAV dependencies. - Hi-Hat Voice: Generated through a continuous white-noise buffer routed through a steep
BiquadFilterNode(bandpass centered at 8.5 kHz with Q=3.0) and shaped by micro-second ADSR gain envelopes. - Lead Synthesizer: Driven by selectable oscillator wave types (
sawtooth,square, andsine) passing through a State-Variable Filter (SVF) with dynamic resonance and cutoff modulation, followed by stereo feedback delay lines and a convolution reverberation bus.
2. The Stateful DSP Contract (Incremental Mutation Engine)
Live music requires state accumulation. If a musician is jamming and asks an assistant to "add delay", they do not expect the drums to stop playing.
BrowserDJ AI enforces an in-memory mutable state tree (activeLoopState):
{
"meta": { "bpm": 135, "scale": "Am", "energy": 0.8 },
"dsp_graph": {
"drums": {
"kick_pattern": [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0],
"hihat_pattern": [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]
},
"synth_lead": {
"wave_type": "square",
"filter_cutoff_hz": 1200,
"filter_resonance": 3.2,
"adsr": [0.01, 0.15, 0.7, 0.2],
"notes_sequence": [57, 60, 64, 67, 64, 60, 57, 0]
},
"effects": {
"delay_feedback": 0.35,
"reverb_mix": 0.25
}
}
}When a new prompt arrives:
- The parser determines the semantic target (e.g., tempo, filter cutoff, track mute, or scale).
- It surgically applies the delta to
activeLoopState. - It passes the mutated graph to
audio.renderGraph(), updating oscillator frequencies and filter nodes seamlessly on the next 16th-note step boundary without clicks or audio dropouts.
3. Edge Execution Boundary (Zero-Roundtrip Latency)
Network roundtrips over HTTPS introduce anywhere from 120ms to 800ms of latency under optimal conditions, and several seconds when servers queue requests. In human psychoacoustics:
- < 15 ms latency: Perceived as instantaneous and physically responsive.
- > 30 ms latency: Perceived as an audible delay, breaking a performer's ability to stay on tempo.
By coupling local browser inference (Gemma 4 through LiteRT/WebGPU with an offline semantic fallback) with client-side synthesis, BrowserDJ AI eliminates network serialization, TLS handshakes, and cloud queueing entirely. The total processing budget from user input to auditory change remains strictly under 20 milliseconds.
Escaping "AI Slop": The Case for Tactile Hardware
Generative tools should not feel like generic chat windows. We deliberately rejected the visual patterns common in recent AI apps—dark void backgrounds, purple-and-cyan gradients, and non-functional glassmorphism.
We anchored the interface in the industrial design principles of Dieter Rams (Braun), the Roland TR-808, and 1980s studio consoles:
- Physical Affordances: A cream matte chassis (
#f4f1ea) with corner screws and silkscreened technical labels. - TR-808 Rhythm Clock: Authentic 16-step key groupings (Vermilion Red, Warm Orange, Amber Yellow, and Cream) paired with incandescent amber LEDs that blink in lockstep with the audio scheduler.
- Physical Fader Deck: Five vertical sliders (Volume, Cutoff, Reverb, Delay, and Loop Length) that move physically when prompts alter audio parameters, complete with calibrated decibel scales (
+6,0,-6,-12,-∞). - Vector CRT Oscilloscope: A dark phosphor display (
#fea619) rendering real audio waveforms in real time against a technical grid. - Mechanical Multi-Language Selector: Rather than hiding localization inside a web dropdown, we built a 3-way tactile button bank
[EN | ES | PT]with individual LED indicators. The entire UI—preset banks, parameter readouts, and prompt placeholders—switches dynamically across English, Spanish, and Portuguese without interrupting playback.
Building at the Edge with Google Antigravity
Building a project that combines WebGPU, the Web Audio API, multilingual NLP, and hardware-style UI across multiple layers is technically demanding. BrowserDJ AI was developed through continuous agentic pair programming with Google Antigravity.
Unlike traditional coding assistants that offer localized line completions, Antigravity acted as an autonomous engineering partner across the entire stack:
- Root-Cause Architectural Debugging:
Early on, prompts failed to update the music reliably. Antigravity audited the state flow and identified that the loop generator was completely stateless—every prompt was overwriting the entire DSP graph. It introduced the incremental accumulator model that solved the problem cleanly.
- Browser-in-the-Loop Verification:
Using Chrome DevTools MCP, Antigravity inspected the live DOM, executed user interactions, verified that the AudioContext remained unblocked by browser autoplay policies, and captured high-resolution viewport snapshots.
- Iterative Hardware Design with Stitch:
To prevent modern web UI conventions from clashing with the vintage aesthetic, Antigravity used StitchMCP to iterate mechanical controls, leading directly to the brushed-aluminum header and tactile 3-way locale switch.
- Autonomous Test-Driven Polish:
When Portuguese prompt parsing failed on accented notes ("escala em ré menor" resolved to Em instead of Dm), Antigravity ran Vitest, diagnosed that JavaScript's ASCII word boundary \b fails on Unicode accents (and that the preposition "em" collided with chord notation), rewrote the regex with Unicode-safe boundaries, and brought all 19 unit tests to a clean pass.
- Production CI/CD Automation:
It consolidated the codebase onto main, cleaned up legacy branches, configured a GitHub Actions Pages workflow (.github/workflows/deploy.yml), and validated live production HTTP responses.
Why This Matters
BrowserDJ AI is free, open source, and available to anyone with a modern browser. It requires no signup, no credit card, and no API key.
We built this project to demonstrate what is possible when you take edge compute seriously. Models like Gemma running directly on consumer hardware via WebGPU are not toys—they are the foundation of a more private, responsive, and independent web.
Explore the live station, inspect the code, and see what you can build when the cloud is no longer a dependency.
- Live Station: https://seagomezar.github.io/djintheedge/
- GitHub Repository: https://github.com/seagomezar/djintheedge
Sebastian Gomez
Creador de contenido principalmente acerca de tecnología.