There are no audio files on this site. Every sound — the collect chirp, the combo chime, the impact, the game-over descent — is generated in the browser at the moment it plays, from a few lines of code.
That is not a constraint we worked around. It has real advantages, and the approach is simpler than it sounds.
The building block: a tone
One sound is three objects: an oscillator producing a waveform, a gain node shaping its volume over time, and a connection to the output.
The gain shaping is what makes it a sound rather than a beep. A raw oscillator switched on and off produces clicks at both ends; an envelope that rises quickly to a peak and then decays exponentially produces something that reads as a note.
Adding a frequency ramp turns a note into a gesture: rising for something positive, falling for something negative. That single distinction covers most of an arcade's emotional vocabulary.
Waveform choice
| Waveform | Character | Used for |
|---|---|---|
| Square | Bright, hollow, retro | Jumps, clicks, countdown |
| Triangle | Soft, rounded | Collection, bonuses, victory |
| Sawtooth | Harsh, buzzy | Impacts, game over |
| Sine | Pure, clean | Shields, misses |
Four waveforms is enough for an entire arcade. The distinction between them is immediately audible, which means a player can tell what happened without looking — which is the point of sound in a game where the eyes are busy.
Filtered noise
Impacts and landings need something less tonal. The technique is to generate a short buffer of random samples with a decaying amplitude, then run it through a low-pass filter.
The filter cutoff controls the character: 700 Hz produces a soft thud suitable for a landing, 1,200 Hz a sharper impact. Two parameters — duration and cutoff — cover the whole percussive range.
Mapping pitch to game state
The most useful trick in game audio, and it costs one line.
The collection sound's pitch rises with your combo chain: frequency = 520 + step × 45, capped at twelve steps. A player at ×5 hears a noticeably higher chirp than one at ×1.
That means your combo state is audible. You can tell your chain is climbing without reading the HUD, which matters in a game where your eyes are on the hazards.
Combo step-ups play a different, louder three-note sequence, so crossing a threshold is unmistakable even during a busy moment.
The autoplay rule
Browsers block audio until a user gesture, which is a good rule that protects people from pages that make noise unprompted.
The consequence for a game is that the audio context must be created and resumed on the first tap or key press inside the play area, not on page load. Trying earlier produces a suspended context that silently fails.
This is why sound in a browser game begins after your first interaction rather than at the start screen, and why there is never any autoplay.
Volume discipline
The master gain here is 0.14 — deliberately quiet.
A browser game has no idea what volume the device is set to. A player might be on headphones at full volume in a quiet room. Starting quiet is the only responsible default, and a player who wants it louder has a system volume control that we do not.
Individual sounds are then mixed relative to that master: collection at 0.5, impacts at 0.45, ticks at 0.18. Nothing approaches clipping, which is what makes a game with frequent overlapping sounds stay pleasant rather than becoming noise.
Pausing with the tab
The audio context is explicitly suspended when the browser tab is hidden and resumed when it returns. Without that, a background tab can keep an audio context alive and consuming power.
The sound preference is stored in LocalStorage, so a player who mutes stays muted across visits — and the mute toggle is available both in the game toolbar and on the M key.
Why synthesis rather than files
- Zero download. A set of arcade sounds as files is a few hundred kilobytes; as code it is about four.
- Parameterisable. A pitch that varies with your combo is trivial with synthesis and requires a dozen files with sampling.
- Original by construction. Nothing is sampled from anywhere, so there is no question of rights.
- No loading state. Sounds are available the instant the script runs, so there is no silent first few seconds.
The trade is fidelity. Synthesised arcade sounds are unmistakably synthesised — they sound like an arcade game rather than like recorded audio. For this genre that is an aesthetic fit rather than a compromise, but it would not suit every game.
Try it yourself: Kitchen Dash
Read the ticket, hit the stations in order and serve before the timer empties.
Key takeaways
- One sound is an oscillator, a gain envelope and a connection to the output; the envelope is what stops it being a click.
- Four waveforms — square, triangle, sawtooth, sine — cover an entire arcade's emotional vocabulary.
- Filtered noise with a decaying amplitude covers impacts; duration and cutoff are the only parameters needed.
- Map pitch to game state so a player can hear their combo climbing without reading the HUD.
- Create and resume the audio context on the first user gesture inside the game, never on page load.
- Start quiet — 0.14 master gain — because you have no idea what volume the device is set to.
- Synthesis costs kilobytes instead of hundreds, is parameterisable, and is original by construction.
References
- MDN Web Docs — Web Audio API — developer.mozilla.org
- MDN Web Docs — Autoplay guide for media and Web Audio APIs — developer.mozilla.org
Frequently Asked Questions
Are the sounds in these games recorded?
No. Every sound is synthesised at run time with the Web Audio API — an oscillator, a gain envelope and a connection to the output. No audio files are downloaded and nothing is sampled from anywhere.
Why does sound only start after I interact with the page?
Browsers block audio until a user gesture, which protects people from pages that make noise unprompted. The audio context is created and resumed on your first tap or key press inside the game.
Why does the collect sound change pitch?
It rises with your combo chain — 520 Hz plus 45 per step, capped at twelve. That makes your combo state audible, so you can tell your chain is climbing without looking at the HUD.
Why is the game so quiet by default?
Because a browser game has no idea what volume your device is set to, and you might be on headphones. Starting quiet is the only responsible default; your system volume can raise it.
What are the advantages of synthesis over audio files?
About four kilobytes instead of a few hundred, parameters that can vary with game state, originality by construction, and no loading delay before sounds are available.