Procedural Audio Synthesis: Sound Without Audio Files in JavaScript

Why Eliminate Audio Asset Files?

Traditional web games bundle dozens of .mp3 or .wav sound files. This introduces network payload bloat, asynchronous decode latency, and playback stuttering on mobile connections. For Flappy Wyzuk, every sound—from the fluttering wing flap to the high-score coin chime—is synthesized mathematically using the browser's native Web Audio API.

This results in zero audio HTTP requests, instant zero-latency playback, and procedural variety by subtly varying oscillator frequency on each trigger.

Designing Sound Waves Mathematically

Sound in Web Audio is created by routing an OscillatorNode through a GainNode to the AudioContext destination. Frequency modulation curves dictate the character of the sound.

function playFlapSound(audioCtx) {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();

  osc.type = 'triangle';
  // Rapid pitch envelope: jump from 150Hz to 480Hz over 80ms
  osc.frequency.setValueAtTime(150, audioCtx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(480, audioCtx.currentTime + 0.08);

  // Quick decay envelope
  gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.12);

  osc.connect(gain);
  gain.connect(audioCtx.destination);
  osc.start();
  osc.stop(audioCtx.currentTime + 0.12);
}

Mobile Audio Context Handling

Modern mobile browsers suspend the Web Audio context until a direct user gesture (touch or click) occurs. Flappy Wyzuk attaches an idempotent initialization listener to the start screen, ensuring audio smoothly awakens without throwing console warnings.