DEV Community: Ant Games

Music and sound effects with no audio files: synthesising everything in Web Audio for browser games

Ant Games — Sat, 14 Nov 2026 08:26:33 +0000

We make free browser games at Ant Games (our own site: no ads, no purchases, no sign-up). None of them ships an audio file. Every sound effect and every piece of music is built in code with the Web Audio API, which keeps each game a single self-contained page and lets the music react to play.

This post covers the techniques we actually use, with snippets trimmed from the audio code of three of our games: JETSUN (plain JavaScript), STAR AGAINST THE DARK and SALLY PORT (TypeScript). It is not a Web Audio tutorial; it assumes you know what an OscillatorNode is.

1. A tiny kit of voice helpers

Almost every sound effect is built from the same few blocks. JETSUN wraps them in four functions: a swept oscillator, filtered noise, two-operator FM and a "musical note". The workhorse:

// percussive envelope: attack, decay to -30 dB over `dur`, 20 ms release
function perc(a, param, t, att, dur, vol) {
  a.env(param, t, [[0, 0.0001], [att, vol], [dur, vol * 0.03], [dur + 0.02, 0.0001]]);
}

function tone(a, t, out, type, f0, f1, dur, vol = 1, att = 0.002) {
  const g = a.gain(0, out);
  perc(a, g.gain, t, att, dur, vol);
  const o = a.osc(type, f0, t, dur, g);
  if (f1 !== f0) a.env(o.frequency, t, [[0, f0], [dur, f1]]);  // pitch sweep
  return o;
}

Two details matter. Envelopes ramp to 0.0001, never to 0, because exponential ramps cannot reach zero. And every helper takes the start time t explicitly instead of using "now", so a recipe can be placed anywhere on the audio clock. a.osc() creates the oscillator, starts it and schedules its stop, so nothing leaks.

A rapid-fire machine gun is then a swept square wave plus a short noise burst:

defineSound('p.vulcan', {
  vol: 0.3, minGap: 0.045,
  play(a, t, out, o) {
    const p = (o.pitch || 1) * R(0.96, 1.04);       // random pitch per shot
    tone(a, t, a.filter('lowpass', 2600, 0.7, out), 'square', 430 * p, 120 * p, 0.07, 0.8, 0.001);
    hiss(a, t, out, 'bandpass', 3200, 1400, 0.035, 0.5, 0.9, 0.001);
  },
});

The pitch jitter stops repeated shots from sounding like one sample on loop, and minGap stops a sound from stacking up when it is triggered every frame.

FM is just as short. The modulator's gain is the modulation depth, and it decays with the note, so the timbre goes from bright to dull the way a struck bell or a zap does:

const c = a.osc(type, fc, t, dur, g);                  // carrier
const depth = a.gain(fc * ratio * index);
a.env(depth.gain, t, [[0, fc * ratio * index], [dur, 1]]);
a.osc('sine', fc * ratio, t, dur, depth);              // modulator
depth.connect(c.frequency);                            // audio-rate frequency modulation

2. One shared noise buffer

Noise is everywhere: explosions, hi-hats, wind, shots. Instead of a buffer per sound, create two seconds of white noise once and share it:

const nb = ctx.createBuffer(1, ctx.sampleRate * 2, ctx.sampleRate), nd = nb.getChannelData(0);
for (let i = 0; i < nd.length; i++) nd[i] = Math.random() * 2 - 1;

Each voice plays that buffer through its own filter. For endless wind or engine loops set loop = true and start at a random offset (s.start(t, Math.random())) so two loops never line up in phase. SALLY PORT does the same but fills its buffer from a seeded PRNG (new Rng(99)), so the noise is identical on every run, which matters for section 7.

3. A reverb with no impulse-response file

A convolution reverb normally needs a recorded impulse response. You can generate one: noise multiplied by a decay curve is a perfectly decent small hall.

const len = Math.floor(ctx.sampleRate * 2.2), ir = ctx.createBuffer(2, len, ctx.sampleRate);
for (let ch = 0; ch < 2; ch++) {
  const d = ir.getChannelData(ch);
  for (let i = 0; i < len; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / len, 2.6);
}
reverb = ctx.createConvolver(); reverb.buffer = ir;

Independent noise per channel gives a wide stereo tail for free. Each sound declares how much it sends (reverb: 0.3 for the railgun, nothing for the machine gun) and the engine wires a send gain to the shared convolver.

4. A music sequencer that schedules ahead on the audio clock

setInterval is far too jittery to time notes. The standard answer is a look-ahead scheduler: a timer wakes up often, and each time schedules every note that falls inside the next fraction of a second, using exact AudioContext times. JETSUN's music kit does this:

tick(now) {  // called ~40 times a second
  if (this.t < now - 0.1) while (this.t < now + 0.02) this._next(); // stalled: skip along the grid, no burst
  while (this.t < now + LOOK) { this._play(this.t); this._next(); } // LOOK = 0.25 s
}
_play(t) {
  if (this.step & 1) t += this.swing;                  // swing the off-beat sixteenths
  for (const layer of this.layers) { /* play this step's event if the layer is on */ }
}

The "stalled" line matters. If a tab was in the background and the timer was throttled, this.t is far in the past, and a naive loop would fire hundreds of notes at once. Skipping along the grid without playing keeps the music in time.

Our tracks are data, not audio. A JETSUN tune is a string notation per bar plus a layer table:

const HOOK = "3 - - 5 8 - - - | 7 - - 6 5 - - - | 6 - - 8 3' - 9 - | ...";
bpm: 108, key: 50, scale: 'major',
layers: {
  kick:  { inst: 'drum', kit: 'kick', vol: 0.7, at: 0.38, pat: 'X.....x.X.......' },
  snare: { inst: 'drum', kit: 'snare', vol: 0.42, at: 0.42, pat: '....X.......X...' },
  lead:  { inst: 'lead', vol: 0.27, wave: 'sawtooth', wave2: 'square', det: 6, vib: 7, at: 0.33 },
}

Notes are scale degrees, not frequencies, so a track changes key by changing one number. The at field is the intensity at which a layer comes in: the game calls setIntensity(0..1) and the arrangement thickens (pad and bells when calm, drums and lead as danger rises) without restarting the track.

5. Custom waveforms with `createPeriodicWave`

The four built-in oscillator types are limiting for pads. STAR AGAINST THE DARK builds its own from harmonic recipes: amplitude falling as 1 / h^power is soft for a high power and bright for a low one, and dropping the even harmonics gives a hollow, reedy tone.

const wave = (n: number, power: number, oddOnly: boolean): PeriodicWave => {
  const re = new Float32Array(n + 1), im = new Float32Array(n + 1);
  for (let h = 1; h <= n; h++) im[h] = oddOnly && h % 2 === 0 ? 0.12 / Math.pow(h, power) : 1 / Math.pow(h, power);
  return ctx.createPeriodicWave(re, im);
};
this.waves = [wave(10, 1.7, false), wave(14, 1.35, false), wave(15, 1.25, true), wave(20, 1.1, false)];
// later: oscillator.setPeriodicWave(this.waves[st.wave]);

Four recipes from soft to bright, and the music state picks one. No sample files, a handful of lines.

6. The master chain: limiter, then a soft clip

With dozens of voices the output clips unless you plan for it. STAR AGAINST THE DARK ends its chain with a compressor used as a limiter, a trim gain and a WaveShaper soft clip:

master.connect(limiter).connect(trim).connect(clip).connect(out);
out.connect(ctx.destination);

Two notes from that file. First, a DynamicsCompressorNode applies automatic makeup gain, so the trim value is computed from the compressor's settings rather than guessed. Second, a Blink quirk noted in the code: the compressor starts fully closed and only opens while it is being fed, so the first sound after start-up lost its attack. The fix is to feed it an inaudible 20 Hz tone for a moment:

const warm = ctx.createOscillator();
warm.frequency.value = 20;
const warmGain = ctx.createGain();
warmGain.gain.value = 1e-5;
warm.connect(warmGain).connect(limiter);
warm.start(); warm.stop(ctx.currentTime + WARMUP);

SALLY PORT and JETSUN use a simpler master (a compressor into the destination). Separate buses for music and effects, each with its own volume and a mute, are what make a game's settings screen work. SALLY PORT also has a duck gain on the music bus, eased with setTargetAtTime(on ? 0.3 : 1, t, 0.15), so music drops while a menu is open.

7. Test it offline, render it deterministically

Because the graph is built on a plain BaseAudioContext, the same code runs on an OfflineAudioContext. STAR AGAINST THE DARK has an audio checker that renders each sound and each music state to a buffer with four output channels: the final output, and the mix just before the limiter, so you can see what the limiter did.

const ctx = new OfflineAudioContext({ numberOfChannels: 4, length, sampleRate: 48000 });
const core = new AudioCore(ctx, { seed, sink });   // the same graph the realtime engine builds

Two ingredients make this useful: a seeded PRNG (the file uses mulberry32) in place of Math.random(), so a render is reproducible, and measurement of the result (peak, loudness, what the limiter removed), so a sound that is too quiet or clipping fails a check instead of waiting for a player to notice.

8. Tie the visuals to the audio clock

SALLY PORT has one more trick worth stealing. Its beat() method returns 1 on each beat, falling to 0 before the next, computed from ctx.currentTime rather than a frame counter:

const ph = (ctx.currentTime - this.beatT) / this.beatDur;

Anything on screen that pulses (a light, a bar, a camera nudge) reads it and stays in time with what you hear, even if the frame rate stutters.

Practical notes

Unlock on a user gesture. Create or resume the context on the first pointerdown or keydown. JETSUN does both, and suspends the context when document.hidden.
Seed anything you want to test. Use a seeded PRNG for sound design that has to be reproducible.
Disconnect what you create. We track live sources and disconnect them when they end.
Rate-limit every sound. A per-sound minimum gap costs one comparison and saves your mix.

The trade-off is real: code-made audio costs design time, and it will not sound like a recorded orchestra. What it gives you is a game that is one file, loads instantly, runs offline, and whose music can respond to play in ways a fixed recording cannot.

To hear the results, JETSUN and STAR AGAINST THE DARK are playable in the browser, and the rest are on the Ant Games home page. The site and each game's page are available in English and Simplified Chinese. Questions about any of the techniques above are welcome in the comments.

One HTML page, no network requests: how our browser games ship

Ant Games — Sat, 14 Nov 2026 06:59:38 +0000

We build a free browser-game site, Ant Games (disclosure: this is our own project). Every game on it follows a short contract that sounds restrictive and turned out to be a useful design constraint: one HTML page, no network requests, no asset files, and everything the player sees or hears is generated by code. This post describes what that means in practice, using facts from our own repository.

The contract

From the production guide every game on the site is built to:

One self-contained page. dist/index.html holds everything. It makes no network request of any kind: no CDN, no web font, no analytics, no fetch. It runs from a double-click (file://).
No asset files beside the page. Models, textures, sprites, icons, sound effects and music are generated by code. Fonts are system font stacks.
TypeScript, strict. Sources are bundled with esbuild into the single page. The only runtime dependency allowed is three, and only for a 3D game.
A deterministic, headless simulation. Game logic lives apart from rendering: fixed timestep, all randomness from a seeded generator, no DOM, no clock, no Math.random(). The same seed and inputs give the same game in the browser and in Node.
No alert, confirm or prompt, and saves are versioned JSON under a per-game localStorage prefix; a save that does not parse is replaced, never trusted.
Languages: The site and every game page are in English and Chinese; Equal Heroes Arena is fully in Chinese, and the others are in English for now.

And on the business side: no ads, no purchases, no sign-up, nothing imitating selling.

Why a single file

A page with no outside requests can't break because a CDN moved, can't leak the player's visit to a third party, and can be archived, emailed or opened offline. It also forces honesty about size: our built SALLY PORT page is 822,010 bytes and HAIRS BREADTH's is 734,817 bytes, with all code, graphics and audio inside.

Graphics: WebGL2

JETSUN, a side-scrolling shoot-'em-up in full 3D, uses three.js on WebGL2 with an HDR render target, MSAA, bloom, a custom post pass and ACES tone mapping, with procedural lofted models and detail maps. Its game.json says it plainly: "Every model, texture, effect, sound and note of music is generated in code." Other games bring their own renderer rather than a library; the guide's rule is to borrow machinery (WebGL helpers, batching, bloom chain, input, save plumbing) but never a game's identity.

Where code is bad at something, such as rigs and baked light, the project allows Blender as an offline tool. Its output is baked into the page as data, so the single-file, no-requests rule still holds.

Audio: synthesised, not sampled

Every effect is synthesised, and music comes from a step sequencer rather than audio files. SALLY PORT, a gate-defence game with 50 levels and 50 bosses, lists "62 sound effects and no asset files" and a distinct music track for each of its five places. Each game has separate volumes and mute.

A deterministic simulation pays for itself

Because the simulation is seeded and headless, the same code runs in Node for tests and bot balance runs, and a seeded daily run comes almost for free: HAIRS BREADTH, a three-lane runner through a jungle temple, ships The Escape (five zones, with an ending), Endless and a seeded Daily Run.

What we would tell you

Constraints that look like limits (no network, no files, no clock) mostly turned into free testability and portability. The cost is real: everything, from sound to models, becomes code you maintain.

You can try the result at antgames.ai, where games are free, without ads or purchases.