Introduction
Web games often play dozens of short sounds. Loading each as its own file means dozens of requests, and on mobile some browsers only let one sound load at a time. An audio sprite solves both: one file holds every sound, and a manifest says where each one is.
Sprites are usually built with command-line tools that need FFmpeg. ToolBuddy's Audio Sprite Creator builds them in your browser. This guide goes from loose clips to a working Howler.js sprite.
What a sprite package contains
The package is one audio file with the clips in a row, separated by short gaps, and a JSON manifest. In the Howler manifest each clip has an offset and a duration in milliseconds and a loop flag; the clip name comes from its file name.
Load and order the clips
Select your clips: MP3, WAV, M4A, AAC, OGG/Opus, FLAC or WebM audio. They appear in the Clips card in the order you added them.
Sort by name or size, or move clips up and down. Reset in the Control Panel header restores the order you added them in. Order only affects where clips sit in the file; your code plays them by name.
Trim and shape each clip
Select a clip to preview it; its trim shows as handles on the waveform. In the Control Panel set the exact start and end, gain, fade in and out, the loop flag for music beds, and silence trimming at the edges.
| Clip setting | Range | Why |
|---|---|---|
| Start / End | Within the clip | Cut dead air or a click |
| Gain | -24 to +24 dB | Balance loud and quiet sounds |
| Fade in / out | 0 to 5 s | Avoid clicks at the edges |
| Loop | On / off | Music beds and ambience |
| Trim silence | On / off | Remove quiet lead-in and tail |
Set the sprite options
Choose the Howler manifest for Howler.js. Set the sample rate (44.1 kHz suits most games; 22.05 kHz for smaller files), mono or stereo, the gap between clips (0.05 s by default, so sounds never bleed into each other), an optional crossfade, and the output format: MP3 or OGG for size, WAV for editing.
Build, preview, download
Select Build sprite. The preview switches to the whole sprite with each clip as a numbered band; click a band to select that clip, or switch to Clip to hear one sound alone.
Download the ZIP with the audio and the JSON together, or the JSON on its own if you only changed the manifest.
Use it in Howler.js
Load the sprite with new Howl({ src: ['audio-sprite.mp3'], sprite: manifest.sprite }) and play a sound with sound.play('coin'). Serve an OGG alongside the MP3 if you need it for older browsers; build the sprite twice with the two formats.
- Keep clip names unique: they become the keys in the sprite map.
- Leave the default gap in place; it costs almost nothing and avoids overlap.
- Use the loop flag for background loops, not for one-shot effects.
Offsets you can rely on
MP3 encoders add a short delay at the start of a file, which used to shift every sprite offset. ToolBuddy writes the gapless header that tells decoders to skip it, and its tests decode the sprite and check each clip starts where the manifest says.
Written by
Ankit Kumar
Senior Software Engineer & Founder at ToolBuddy
Engineering browser-first utilities with zero upload requirements using WebAssembly, Web Audio, and Canvas technologies.