nucleic.se

Chiptune Synthesizer

A 4-voice chiptune synthesizer with evolving patterns. Each loop brings subtle mutations — the melody shifts, the arpeggio transposes, the rhythm breathes. Press play and let it grow.

The Scheduler Loop

The Web Audio API uses a hardware-accurate clock, but JavaScript's event loop is imprecise. The solution is a look-ahead scheduler: instead of scheduling notes exactly when they should play, the code fills a buffer of upcoming notes slightly ahead of time. This ensures rock-solid timing even when the browser's main thread gets busy.

const SCHEDULE_AHEAD = 0.1;  // 100ms lookahead
const SCHEDULE_INTERVAL = 25; // Check every 25ms

function scheduler() {
  while (nextNoteTime < audioCtx.currentTime + SCHEDULE_AHEAD) {
    scheduleNote();
    nextNoteTime += sixteenthNoteDur;
  }
}

The loop runs on an interval, constantly checking whether any notes fall within the lookahead window. Each note gets its precise start time, and the Web Audio engine handles the rest — no matter what else JavaScript is doing.

Four-Voice Architecture

Classic chiptunes had a limited number of sound channels — the Nintendo had five, the C64 had three. This synthesizer uses four independent voices, each with its own pattern and timbre. The lead plays melody, the bass anchors the low end, the arpeggio cycles rapidly through chord tones, and the drums keep time.

function scheduleNote() {
  // Schedule lead
  if (leadNotes[leadIdx]) {
    const note = leadNotes[leadIdx];
    const freq = note.freq || getNoteFreq(note.note);
    playLeadNote(freq, time, note.dur * sixteenthNoteDur);
    leadIdx = (leadIdx + 1) % leadNotes.length;
  }
  
  // Schedule bass, arp, drums...
}

Each voice has its own pattern array and its own index tracker. The lead advances note by note, the bass plays on beats, the arp runs at 16th-note speed, and the drums check a grid of kick/snare/hihat hits. All four run in parallel, producing the characteristic dense chiptune texture.

Oscillators and Envelopes

The heart of each voice is an oscillator with a shaped amplitude envelope. The Web Audio API provides oscillator types that mimic classic chiptune waveforms: sawtooth for bright leads, square for thick bass, and noise for percussion.

function playLeadNote(freq, startTime, duration) {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  
  osc.type = 'sawtooth';
  osc.frequency.value = freq;
  
  // Amp envelope: quick attack, medium release
  gain.gain.setValueAtTime(0, startTime);
  gain.gain.linearRampToValueAtTime(0.3, startTime + 0.02);
  gain.gain.setValueAtTime(0.3, startTime + duration - 0.05);
  gain.gain.linearRampToValueAtTime(0, startTime + duration);
  
  osc.connect(filter);
  filter.connect(gain);
  gain.connect(masterGain);
}

The envelope shapes every note: attack (how fast it reaches full volume), sustain (how long it holds), and release (how long it fades). A lead needs a quick attack for definition. A bass needs a slower attack to avoid clicks. Drums use extreme envelopes — the kick's pitch drops from 180Hz to 40Hz in 100ms, creating that distinctive 808 impact.

Pattern Generation

Notes aren't stored as raw frequencies — they're stored as named notes in arrays of objects. Each note has a pitch and a duration in sixteenth-note units. The pattern functions construct these arrays, applying any mutations that have accumulated.

function getLeadPattern() {
  const base = [
    { note: 'E4', dur: 2 }, { note: 'G4', dur: 1 }, { note: 'A4', dur: 1 },
    { note: 'G4', dur: 2 }, { note: 'E4', dur: 2 },
    // ... 8 bars of melody
  ];
  
  // Apply transposition
  const transposed = base.map(n => 
    transposedNote(n.note, mutations.leadTransposition)
  );
  
  return transposed;
}

The conversion from note names to frequencies uses equal temperament: f = 440 × 2^((midi-69)/12). Named notes like 'E4' become MIDI numbers, then frequencies. This abstraction keeps patterns readable and makes transposition trivial — add semitones to transpose, invert around a center note for melodic variation.

The Mutation System

Each time the 8-bar loop completes, one or two mutations apply. These aren't random changes — they're musical transformations that preserve the underlying structure while evolving the surface. Transposition shifts a voice up or down. Inversion flips a melody around its center. Pattern shifts change rhythmic feel. Passing notes insert new chromatic connections.

function applyMutations() {
  const mutationOptions = [
    () => {
      mutations.arpTransposition += 2;
      return `Transposed arpeggio up 2 semitones`;
    },
    () => {
      mutations.leadInverted = !mutations.leadInverted;
      return mutations.leadInverted ? `Inverted lead melody` : `Returned melody to normal`;
    },
    // ... more mutation types
  ];
  
  // Pick 1-2 mutations per loop
  const numMutations = 1 + Math.floor(Math.random() * 2);
  // ... apply and rebuild patterns
}

The mutations accumulate across loops. This creates evolution: each pass makes the pattern slightly different, but the changes are constrained to musical operations. After many loops, the melody might be transposed up two octaves, inverted, with extra passing notes — a recognizable descendent of the original, not a random variation.

Drum Synthesis

Chiptune drums are synthesized, not sampled. A kick drum uses a sine wave with an aggressive pitch envelope: start high, drop fast. A snare combines a brief tone component with filtered noise. Hi-hats are pure high-passed noise. All three come from oscillators and noise buffers, not audio files.

function playKick(startTime) {
  const osc = audioCtx.createOscillator();
  osc.type = 'sine';
  
  // Pitch envelope: start higher, drop fast
  osc.frequency.setValueAtTime(180, startTime);
  osc.frequency.exponentialRampToValueAtTime(40, startTime + 0.1);
  
  // Amp envelope
  gain.gain.setValueAtTime(0.6, startTime);
  gain.gain.exponentialRampToValueAtTime(0.01, startTime + 0.3);
}

The exponential ramp is crucial. Linear ramps sound mechanical. Exponential ramps — where the rate of change accelerates or decelerates — match how physical systems behave. A real drum head tightens as it vibrates, raising its own pitch. The digital simulation captures this by ramping frequency exponentially.

What This Reveals

Chiptune music is often dismissed as retro nostalgia, but the techniques reveal deeper truths about constrained creativity. When you have only four voices, every choice matters. When patterns must repeat efficiently, structure becomes the primary composition tool. The mutation system shows how constraint breeds innovation — by limiting mutations to musical operations, the system produces variation that stays coherent.

The look-ahead scheduler demonstrates a general principle for real-time audio: never trust the main thread. By separating scheduling from playback, the code achieves sample-accurate timing regardless of UI activity. The same pattern applies anywhere precise timing meets unpredictable load: fill a buffer ahead of time, let the hardware play it back.