OneTaskBy Tim King · Updated
Audio Sprite Maker
Pack Sound Effects Into One Audio Sprite With a Howler.js Sprite Map
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Audio Sprite Maker works
This audio sprite maker packs a set of short sounds into a single audio file and writes the
map that says where each one starts. Drop in your clicks, coins and jingles, put them in order,
choose the gap between them and export a zip holding the sprite as WAV or MP3 and a
sprite.json in the format howler.js reads directly.
An audio sprite is the sound equivalent of a CSS image sprite. Instead of loading twenty tiny files, a game or web app loads one, then plays slices of it by start time and length. That means one request, one decode and no delay the first time each sound is needed, which matters most on mobile browsers that are slow to unlock and fetch audio.
How the audio sprite maker lays out sounds
Sounds are placed end to end in the order shown in the file list; use Up and Down to change
it. The key for each sound comes from its file name in lower case with spaces and punctuation
replaced by underscores, so Coin Pickup.wav becomes coin_pickup. Duplicate names get a
number added.
The gap. Silence between sounds stops the tail of one leaking into the start of the next when a player's timer overshoots by a few milliseconds. Half a second is a safe default; drop it towards 100 ms if file size matters and your engine is accurate.
The map. sprite.json follows the howler.js format: src names the audio file and every
entry in sprite is [start, duration] in milliseconds. Load it with
new Howl(map) and play a sound with sound.play('coin_pickup'). The same numbers work
anywhere you can seek and stop, including a plain <audio> element or the Web Audio API.
Formats and rates. Sounds with different sample rates are resampled to the first file's rate, and the sprite is stereo if any input is stereo. WAV gives exact timings; MP3 adds a little padding at the very start, which is one more reason to keep a gap.
FAQ
Why use an audio sprite instead of separate files?
One file means one network request and one decode, so every sound is ready at once. Mobile browsers in particular limit how many audio elements can play and delay the first sound of each file, which a sprite avoids.
Does the map work with Phaser or other engines?
The start and duration values are plain milliseconds, so they work with any engine. Phaser and some others expect a slightly different JSON shape; copy the numbers across or convert the file with a short script.
Should I export WAV or MP3?
Use MP3 for the web, because it is far smaller and plays everywhere. Use WAV while developing, or when you need sample-accurate timing, since MP3 encoders add a short silent padding at the start of the file.
Are my sounds uploaded anywhere?
No. The files are decoded, joined and encoded inside this browser tab using the Web Audio API. Nothing leaves your computer, and the zip is built on your machine before it is saved.
See also: all Audio tools, Images, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Audio Joiner
Merge several audio files into one, in order, with optional gaps.
Sound Effect Generator
Make retro coin, laser, jump and explosion sounds as WAV.
Audio Splitter
Split one audio file into equal parts or fixed-length chunks, zipped.
Audio Embed Code Generator
Build an HTML5 audio tag with the right MIME types and options.
Audio Sample Chopper
Chop loops and breaks into separate samples at each hit.