Kurashizu's Blog

When you load a modern web application that plays audio, it almost invariably fetches megabytes of pre-rendered .mp3 or .wav sample files, decodes them through a memory buffer, and streams them back. While this works well for standard media playback, it eliminates the tactile immediacy, infinite variability, and harmonic depth that hardware synthesizers provide.

With the launch of the KRSZ Synthesizer Workstation (live now at krsz.in/synth), the goal was radically different: build a zero-dependency, sample-free, 8-track modular chiptune synthesizer and piano roll workstation that runs 100% on client-side Web Audio DSP, boots in 0 milliseconds, and delivers sub-millisecond audio response without downloading a single sound file.

Here is an architectural walkthrough of how the sound engine, modulation topology, multi-track tracker, and high-performance React UI were engineered.

1. Core Synthesis Engine: Pure Mathematical Sound Generation

At the heart of the synthesizer is a modular Web Audio graph designed in TypeScript (ModularSynthesizer). Rather than relying on static soundfonts, every single note—from an 8-bit pulse bass to a resonant laser zap or noisy snare—is generated mathematically in real time using native AudioNode primitives.

+-----------------------------------------------------------------------+
|                       KRSZ SYNTH CHANNEL STRIP                        |
+-----------------------------------------------------------------------+
|  [OSC 1 (Pulse/Saw/Tri/Sin/Noise)] \                                  |
|                                     --> [2. FUSION (FM/Ring/Sync)]    |
|  [OSC 2 (Pulse/Saw/Tri/Sin/Noise)] /               |                  |
|                                                    v                  |
|  [SUB OSC + NOISE GEN] ------------> [3. 24dB VCF FILTER (LP/HP/BP)]  |
|                                                    |                  |
|  [5. MOD MATRIX (LFO + Envs)] ----------> (Cutoff/Res/Pitch/PW)       |
|                                                    |                  |
|                                                    v                  |
|  [4. AMP ADSR ENVELOPE] -----------> [6. FX: DRIVE -> DELAY -> REV]  |
|                                                    |                  |
|                                                    v                  |
|  [7. MASTER OUTPUT BUS] -----------> [60 FPS FFT SPECTRUM & SCOPE]   |
+-----------------------------------------------------------------------+

Dual Multi-Waveform Oscillators

Each of the 8 polyphonic tracks contains a dedicated dual-oscillator pair (OSC 1 and OSC 2) capable of generating:

Pulse / Square Wave with Dynamic PWM: By shaping duty cycles, we replicate the hollow, punchy reed timbres characteristic of the Nintendo Entertainment System (NES) 2A03 APU.
Sawtooth: Rich in all integer harmonics, providing the buzzy foundation for brass stabs, supersaws, and ripping synth leads.
Triangle: Pure fundamental with subtle odd harmonics, perfect for clean chiptune basslines and soft flutes.
Sine: Clean fundamental tone, crucial as a carrier and modulator for frequency modulation.
High-Entropy Noise Generator: Synthesized using real-time audio buffers filled with white and pink noise distributions, dynamically filtered for percussion clicks, hi-hats, and snares.

// Custom Noise Buffer Generation (No external files)
const bufferSize = ctx.sampleRate * 2;
const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
const output = noiseBuffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) {
  output[i] = Math.random() * 2 - 1; // Pure White Noise distribution
}

2. The Fusion Engine: FM, Ring Modulation, and Hard Sync

Standard subtractive chiptune synths can sound thin without harmonic interaction. The FUSION block provides four inter-oscillator blend algorithms:

Additive / Layer: Phase-aligned parallel stereo summation with micro-detuning (-50 to +50 cents) for wide chorus textures.
Frequency Modulation (FM): Audio-rate modulation of OSC 1's frequency by OSC 2's output: $f_{\text{out}}(t) = f_c + I \cdot f_m \sin(2\pi f_m t)$ This produces rich, metallic sideband spectra reminiscent of Yamaha DX7 and chiptune FM soundchips (Yamaha YM2612).
Ring Modulation (AM / 4-Quadrant Multiplier): Multiplies the two waveforms in the time domain, canceling the original fundamental frequencies and leaving only sum and difference sidebands ( $f_1 \pm f_2$ ) for bell-like and sci-fi robotic textures.
Oscillator Hard Sync: Force-resets OSC 1's phase cycle every time OSC 2 completes a cycle, creating harmonic tearing effects during pitch sweeps.

3. Voltage-Controlled Filter (VCF) and Triple ADSR Curves

The output of the oscillator fusion engine passes into a four-mode Biquad VCF Filter:

Low-Pass (LPF 24dB/oct): Cuts off high frequencies, warming the sound with adjustable resonance ( $Q$ factor up to 20.0).
High-Pass (HPF 24dB/oct): Strips sub-bass clutter, essential for hi-hats and cutting lead solos.
Band-Pass (BPF) & Notch: Isolates or notches specific frequency bands for classic vowel/talk-box effects.

Each voice is sculpted by three independent, visualised curve envelopes:

AMP ADSR: Shapes amplitude attack, decay, sustain level, and exponential release.
VCF ADSR: Shapes filter cutoff modulation over time (e.g., quick 15ms plucks vs. slow-opening pads).
PITCH ADSR: Instantaneous pitch drop envelope (1ms attack, 30ms decay) used to synthesize punchy 808 kicks and chiptune laser blips.

4. Multi-Track Sequencer with Piano Roll and Multi-Track Overlay

While many browser synths feature simple 16-step monophonic step sequencers, the KRSZ Synth was designed as a full-fledged 8-Track Chiptune Tracker:

+---------------------------------------------------------------------------------------------------------------------+
| [|◄] [◄◄] [► PLAY] [►►] [⤹ CUR: 1]                  [BPM: 105]  |  [LEN: 16..1184]  |  [METER: 4/4 3/4 5/4 6/8]   |
+---------------------------------------------------------------------------------------------------------------------+
| [SAVE] [LOAD] [EXP] [IMP]                [⧉ OVERLAY]  [TRK 1 (M/S)] [TRK 2 (M/S)] [TRK 3 (M/S)] [TRK 4 (M/S)] ...  |
+---------------------------------------------------------------------------------------------------------------------+
| [PRESETS: 8-BIT BASS, PLUCK, BRASS...]             [SNAP: 1/4] [DUR: 1/4]                 [PAGE: ◄ 1/37 ►] [FLW]   |
+---------------------------------------------------------------------------------------------------------------------+

High-Precision Lookahead Scheduling

To guarantee zero jitter during playback, sequencer timing bypasses setInterval / setTimeout drift by using a Web Audio Lookahead Clock:

private scheduler() {
  // Schedule all audio events occurring within the next lookahead window (100ms)
  while (this.nextStepTime < this.audioCtx.currentTime + this.scheduleAheadTime) {
    this.scheduleStepAudio(this.currentStep, this.nextStepTime);
    this.advanceStep();
  }
  this.timerID = requestAnimationFrame(() => this.scheduler());
}

Multi-Track Layered Overlay (`⧉ OVERLAY`)

One of the biggest challenges in tracker music is aligning melodies, counterpoints, basslines, and percussion across multiple tracks.

When ⧉ OVERLAY mode is active, users can multi-select any combination of TRK 1 through TRK 8. The piano roll matrix renders all selected tracks simultaneously on the same grid—each with its distinct color identity—while keeping the primary active editing track prominent.

The default preset boots with the complete 1,184-step Super Mario Bros. Overworld Theme pre-arranged across 4 synchronized tracks:

TRK 1 (Amber): Lead Melody (Pulse Wave, Vibrato LFO)
TRK 2 (Cyan): Counter-Melody & Polyphonic Harmony (Pulse/Saw Pluck)
TRK 3 (Red): Iconic 8-Bit Walking Bass (Triangle Sub-bass, VCF Pluck)
TRK 4 (Pink): High-Pass Noise Percussion & Snare Accents (Filtered Noise HPF)

3-Level Dynamic Accent Track (`ACC`)

Located directly below the note grid, the ACC track provides 3-level step-by-step velocity cycling:

Level 0 (OFF / 0dB): Normal base voice gain.
Level 1 (+3dB Boost, Amber): Mild amplitude boost with slight filter cutoff expansion.
Level 2 (+6dB Hard Accent, Crimson Red): Aggressive punch that over-drives the VCF filter resonance, creating dynamic syncopation essential for retro game soundtracks.

5. 60 FPS Real-Time Vector Visualizers

Real-time audio visualization is rendered directly on HTML5 <canvas> elements tied to Web Audio AnalyserNode streams:

FFT Logarithmic Spectrum (7. OUT / FFT): 20Hz–20kHz frequency distribution with smooth multi-color neon gradient fill.
Oscilloscope Vector Waveform (SCOPE): Direct time-domain voltage trace with zero-crossing phase stabilization.
Peak Loudness Meter (LOUD): Peak and RMS audio energy monitoring.

6. Serverless Edge Architecture

The entire synthesizer workstation is bundled and deployed to Cloudflare's global edge network via Cloudflare Workers and Static Assets:

0ms Audio Cold-Start: Zero asset fetching latency; the synthesis graph initializes upon the user's first interactive gesture.
SPA Deep Linking: Built with single-page routing support (/synth), allowing direct browser bookmarking and instant sharing.
Patch Portability: Synthesizer state can be saved to browser LocalStorage or exported as clean, human-readable .json patch files to share arrangements with other musicians.

Try It Live

The synthesizer is live right now in your browser without installs, plugins, or sound downloads:

🎹 Launch the Synthesizer: krsz.in/synth

Whether you want to explore sound design, write chip-tune loops, or inspect the interactive 60fps audio visualizer, everything is open, tactile, and running directly on edge serverless hardware.