We are not looking at which iteration progresses the quickest or furthest, but which holds the most promise.
Ambient Engine is a generative ambient music system that runs entirely in the browser — no DAW, no plugins, nothing to install. The concept is rooted in the same territory as Brian Eno and Peter Chilvers' Bloom: an instrument that plays itself, producing a living harmonic system that never repeats the same sequence twice.
The engine drives slow, evolving note sequences based on a fixed harmonic progression. Each chord is converted into a melodic pattern by a custom Emotional Arpeggiator, which selects the next note using three weighted criteria: interval tension, root-distance gravity, and emotional bias — a continuous variable that shifts the system between calm, hopeful, melancholic, and mysterious. The result is an arpeggio that feels organic rather than mechanical.
The system has no interest in arriving anywhere quickly. That's the point — what makes it worth building is not how fast each iteration resolves, but how much each one promises.
Audio Architecture
The signal chain is built from scratch using the Web Audio API. Each generated note passes through a true stereo delay — left and right channels independently configured with their own delay time, feedback loop, low-pass tone filter, and dry/wet blend — followed by a convolution reverb whose impulse response is synthesised at runtime. The reverb supports multiple timbral modes (cloud, bright, dark, ghost), a freeze mode, and variable decay curves, producing the kind of atmospheric depth that transforms single notes into floating harmonic clouds. A high-passed shimmer path adds a subtle brightness feedback similar to Valhalla Shimmer, and a soft master limiter keeps the output stable regardless of feedback level.
Scheduling Architecture
Generative audio running inside a React app presents a specific problem: React's rendering cycle and the Web Audio scheduler operate on different timelines, and naive implementations drift, double-trigger notes, or lose sync between audio and visuals. Ambient Engine resolves this with a two-layer architecture. React manages the UI state — chord display, background colour, shader intensity, and FX controls — while a dedicated async loop outside the rendering cycle handles exact note timing, arpeggio sequencing, and chord transitions. Refs and promise chains ensure zero note overlap and no drift, mirroring the approach used in native audio engines.
Visual System
Every note event triggers a GLSL shader response: a soft pulse radiates through the background, and the ambient colour gradient morphs toward the harmonic palette of the current chord. Colour and harmony evolve together — palettes are embedded in the chord data alongside the note information — so the visual and sonic layers stay in continuous correspondence rather than being loosely coupled. The shader itself uses layered 2D value noise with time-based distortion and a music-reactive brightness lift on each note event.
Context
This is a prototype — a proof of concept for how far Web Audio and WebGL have come as a creative platform. It runs on any modern browser, on Mac, Windows, iPad, or phone, with no configuration required. The browser is the instrument, the DAW, and the stage.
Tools
- React
- Web Audio API
- React Three Fiber
- Three.js
- GLSL