web-audio-api-synthesis

Web Audio API Synthesis Skill Guide

This skill governs standard practices for building high-fidelity audio synthesis, modular audio node graphs, and real-time AudioWorklet processors in web applications.

1. Audio Node Graph Architecture

The Web Audio API connects modular AudioNode instances into a directed graph routing into AudioDestinationNode (speakers).

[ OscillatorNode (VCO) ] -----> [ BiquadFilterNode (VCF) ] -----> [ GainNode (VCA) ]
                                          ^                                |
                                          |                                v
[ AudioBufferSourceNode (Noise) ] ---------+                     [ DynamicsCompressorNode ]
                                                                           |
                                                                           v
                                                            [ AudioDestinationNode ] (Speakers)

2. Production Code Standards

A. Subtractive Polyphonic Synthesizer Voice (TypeScript)

export class SynthVoice {
  private ctx: AudioContext;
  private osc: OscillatorNode;
  private filter: BiquadFilterNode;
  private ampGain: GainNode;

  constructor(ctx: AudioContext) {
    this.ctx = ctx;

    // 1. Voltage Controlled Oscillator (VCO)
    this.osc = this.ctx.createOscillator();
    this.osc.type = "sawtooth";

    // 2. Voltage Controlled Filter (VCF)
    this.filter = this.ctx.createBiquadFilter();
    this.filter.type = "lowpass";
    this.filter.frequency.value = 800; // Cutoff
    this.filter.Q.value = 6;           // Resonance

    // 3. Voltage Controlled Amplifier (VCA)
    this.ampGain = this.ctx.createGain();
    this.ampGain.gain.setValueAtTime(0.0001, this.ctx.currentTime);

    // 4. Connect Audio Graph
    this.osc.connect(this.filter);
    this.filter.connect(this.ampGain);
  }

  public connect(destination: AudioNode): void {
    this.ampGain.connect(destination);
  }

  public triggerAttack(frequency: number, velocity: number = 0.8): void {
    const now = this.ctx.currentTime;
    this.osc.frequency.setValueAtTime(frequency, now);

    // ADSR Envelope (Attack & Decay)
    this.ampGain.gain.cancelScheduledValues(now);
    this.ampGain.gain.setValueAtTime(0.0001, now);
    this.ampGain.gain.exponentialRampToValueAtTime(velocity, now + 0.02); // 20ms Attack
    this.ampGain.gain.exponentialRampToValueAtTime(velocity * 0.7, now + 0.15); // 130ms Decay

    // Filter Envelope Sweep
    this.filter.frequency.cancelScheduledValues(now);
    this.filter.frequency.setValueAtTime(300, now);
    this.filter.frequency.exponentialRampToValueAtTime(3500, now + 0.05);
    this.filter.frequency.exponentialRampToValueAtTime(800, now + 0.3);

    this.osc.start(now);
  }

  public triggerRelease(): void {
    const now = this.ctx.currentTime;
    // Release Stage
    this.ampGain.gain.cancelScheduledValues(now);
    this.ampGain.gain.setValueAtTime(this.ampGain.gain.value, now);
    this.ampGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.3); // 300ms Release

    this.osc.stop(now + 0.35);
  }
}