Browser Game Sound Design with the Web Audio API

2026-09-14 · 10 min read

Why Procedural Audio?

Most game audio tutorials tell you to download WAV files and play them. That works, but it means loading megabytes of audio assets, managing file formats across browsers, and having no control over the sound once it plays.

The Web Audio API lets you synthesize sounds in real time using oscillators, filters, and envelopes. This means zero audio files to load, infinite variations of each sound, and full runtime control over pitch, volume, and effects. For browser games where download size matters, procedural audio is a game-changer.

Web Audio API Basics

Everything starts with an AudioContext. This is your audio engine — it manages the audio graph (a network of connected nodes) and handles timing, mixing, and output.

Critical gotcha: browsers require a user interaction before audio can play. Create your AudioContext lazily — on the first click or keypress, not on page load.

Building Your First Sound Effect

A basic sound effect uses three components:

• OscillatorNode — generates a tone at a specific frequency and waveform (sine, square, sawtooth, triangle)
• GainNode — controls volume, used for fade-in/fade-out envelopes
• AudioDestination — the speakers

Connect them in order: Oscillator → Gain → Destination. Schedule the oscillator to start and stop, ramp the gain for a smooth envelope, and you have a sound effect.

Essential Game Sound Recipes

Coin Collect / Pickup

A classic pickup sound is a quick ascending tone. Use a sine wave oscillator, frequency sweep from 600Hz to 1200Hz over 0.1 seconds, with a sharp attack and medium decay. The ascending pitch triggers a reward sensation in the player's brain.

Jump

A jump sound uses a sine wave with a quick frequency sweep from 200Hz to 400Hz over 0.15 seconds. Add a slight detune on a second oscillator for thickness. The upward pitch motion mirrors the visual upward movement.

Impact / Hit

Combine a low-frequency sawtooth (80Hz, quick decay) with white noise (very short, 0.05s). The sawtooth provides the "thump" while the noise adds the "crack." Filter the noise with a BandpassFilter around 2000Hz for a more natural sound.

Explosion

Layer white noise through a lowpass filter (start at 2000Hz, sweep down to 200Hz over 0.5s) with a bass sine oscillator (60Hz, 0.3s decay). Add a second noise layer with a highpass filter for the "sizzle." Vary the filter frequencies randomly each time for unique explosions.

UI Click

A short (0.02s) sine wave at 800Hz with instant attack and fast decay. Clean and non-intrusive. Vary the pitch slightly (780-820Hz) on each click to avoid it sounding robotic.

Ambient Wind

White noise through a bandpass filter (center 400Hz, Q 0.5) with slow random modulation of the filter frequency. Layer two instances at different center frequencies for depth. Crossfade between them with slow sine-wave gain modulation.

Building an Audio Manager

Don't scatter audio code throughout your game. Create a centralized audio manager that handles:

• Sound registration — define each sound type with its synthesis parameters
• Playback — audio.play('coin') triggers the registered sound
• Volume control — master volume, category volumes (SFX, music, ambient)
• Muting — toggle all audio on/off (save the preference)
• Cooldowns — prevent the same sound from overlapping too quickly (sounds muddy)

Music Without Files

Procedural music is more complex than sound effects but surprisingly approachable. Start with a simple arpeggiator:

1. Define a chord progression (e.g., C major → A minor → F major → G major)
2. For each chord, define the notes (frequencies)
3. Schedule oscillators to play each note in sequence with a fixed interval (e.g., 0.2 seconds)
4. Use the AudioContext's precise timing (context.currentTime) to schedule notes ahead of time

Layer a bass note (fundamental of each chord, sine wave, low octave) under the arpeggio. Add a filtered noise pad for atmosphere. This gives you a basic but effective ambient soundtrack.

Spatial Audio for 3D Games

The Web Audio API includes a PannerNode that positions sounds in 3D space. This is powerful for 3D browser games — sounds get louder as you approach and quieter as you move away, with stereo panning based on direction.

Set up spatial audio:

• Create an AudioListener positioned at the camera/player
• For each sound source, create a PannerNode with its 3D position
• Update positions each frame to match game objects
• Set distanceModel to 'inverse' and adjust refDistance and maxDistance

In FarmHeart, animal sounds use spatial audio — cows moo louder when you're near the pasture, and crickets chirp from all around you at night. It adds tremendous immersion for minimal code.

Performance Considerations

Audio processing happens on a separate thread, so it rarely causes frame drops. But there are limits:

• Keep simultaneous oscillators under 50. Beyond that, mobile devices may crackle
• Reuse GainNodes where possible — creating and destroying nodes has overhead
• Disconnect nodes when sounds finish (oscillator.onended) to prevent memory leaks
• On mobile Safari, resume the AudioContext after backgrounding (it suspends automatically)

Testing Audio

Audio bugs are the hardest to automate. Build debug tools:

• A debug panel showing active oscillator count, audio context state, and master volume
• Buttons to trigger each sound effect individually
• A "stress test" that plays 20 sounds simultaneously to find crackle thresholds

Test on real mobile devices — audio behavior differs significantly between Chrome on Android, Safari on iOS, and desktop browsers. Safari in particular has quirks with AudioContext resumption and oscillator scheduling.