SYNTHDRIFT
Browser-Based Modular Synthesizer
& CV Automation Environment
/ Overview
SynthDrift transforms the browser into a modular synthesis environment powered entirely by the Web Audio API. Soundscapes are created by patching oscillators, filters, effects, and instruments together in real time, while a dedicated CV Graph Editor enables visual automation through modulation curves, triggers, and sequencing.
See it live/ Project Details
Name: SynthDrift — Browser Modular Synthesizer
Industry: Music Technology / Audio Software
Type: Web Application
Technology: Vanilla JavaScript, Web Audio API, HTML5 Canvas, Firebase
Date: July 2025
/ CONCEPT & IDEA
SynthDrift was built to transform the browser into a fully modular Eurorack-style synthesizer. Developed entirely with native browser technologies, each module functions as an independent audio unit with its own routing and DSP behavior. Dynamic patching, real-time CV automation, and the custom CV Graph Editor combine to create a browser-native synthesis and sequencing environment inspired by both modular hardware and DAW automation systems.
/ ARCHITECTURE
Audio Engine
A fully custom audio architecture built using the Web Audio API powers oscillators, filters, effects chains, modulation systems, and master processing.
Modular Patching System
Modules communicate through ID-based signal routing, where audio sources and destinations connect by referencing module IDs. This enables flexible patch-chain construction inspired by hardware modular synthesis environments.
CV Automation Engine
The CV system evaluates modulation curves continuously using a requestAnimationFrame update loop. Trigger spikes, gates, ramps, exponential curves, ADSR envelopes, and freehand automation can control parameters across the entire synthesis graph in real time.
/ SYSTEM DESIGN
Designing SynthDrift required building a flexible modular audio environment with stable real-time performance inside the browser. The development process focused on UI modularity, dynamic audio routing, timing precision, and automatic signal balancing to create a smooth and scalable synthesis workflow. The architecture was structured to support independent audio modules, real-time CV automation, and responsive patch-chain interactions while maintaining low-latency playback and visual synchronization.
/ TECHNOLOGY STACK
Vanilla JavaScript
The entire application architecture uses ES6+ classes, async systems, and custom rendering logic without frameworks or external dependencies.
Web Audio API
Native browser audio nodes handle synthesis, filtering, modulation, effects processing, mixing, and stereo output generation in real time.
HTML5 Canvas
Canvas rendering powers the CV Graph Editor, waveform visualization, timeline interaction, viewport navigation, and automation drawing tools.
Firebase Authentication
Google and email-based authentication systems allow project persistence and future collaborative workflow expansion.
/ Key Features
60+ synthesizer and utility modules • Modular signal-chain patching system • Real-time CV automation editor • 7 programmable curve types • Oscillators, filters, effects, and instruments • Automatic gain compensation • Timeline zoom and viewport navigation • Undo / Redo editing system • Full JSON project save/load support • Auto-save with localStorage recovery • Real-time waveform and RMS monitoring • Browser-native low-latency audio engine • Stereo master processing chain
