Procedural Sound Design with Web Audio API

The Idea

Every module should sound different. Security gets an alert tone. Game gets an 8-bit coin pickup. Music gets a major triad. All synthesized — no audio files needed for UI sounds.

Web Audio Pipeline

OscillatorNode → GainNode → AudioContext.destination

Each sound is a short-lived oscillator with an exponential gain ramp to zero. The envelope (attack/decay) gives each sound its character.

Module Sound Signatures

Module	Type	Character
Security	Sawtooth sweep down	Alert, urgent
Dev Tools	Square pulse	Digital, mechanical
Game	Square + high pitch	8-bit coin pickup
Manga	Sine + vibrato	Soft, warm
Robotics	Sawtooth chord	Metallic, industrial
Music	Sine triad (C-E-G)	Harmonic, pure
Web	Triangle sweep up	Clean, ascending

Implementation

function playTone(freq: number, type: OscillatorType, duration: number) {
  const ctx = getAudioContext()
  const osc = ctx.createOscillator()
  const gain = ctx.createGain()

  osc.type = type
  osc.frequency.value = freq
  gain.gain.setValueAtTime(0.15, ctx.currentTime)
  gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration)

  osc.connect(gain)
  gain.connect(ctx.destination)
  osc.start()
  osc.stop(ctx.currentTime + duration)
}

Browser Gotchas

The AudioContext starts in a suspended state. You must call ctx.resume() after a user gesture (click, tap). Without this, nothing plays on mobile Safari.

Also: create oscillators fresh each time. Reusing stopped oscillators throws InvalidStateError.