vite-combine-audio
Vite plugin · published on npm · used by Odam and Knights & Crosses
A Vite plugin that merges every sound in a web game into a single audio file at build time, so the game loads one file, not dozens.
Why
- Dozens of sounds means dozens of requests. A browser game with a sound for every roll, hit and button press makes a request for each one, and mobile browsers are slow to start each new piece of audio. One file, played from different offsets, avoids both.
- Nothing changes in the game's code. Importing
./slash.mp3still works. It now returns where that sound sits in the merged file, ready to hand to an audio library like Howler as a sprite. - In production in two games: Odam ships 54 sounds through it and Knights & Crosses ships 43.
How it's built
- Exact timings. Each clip's length is found by counting its decoded samples. The duration ffmpeg prints is rounded, and its other reports can be a frame short, and across dozens of clips those errors add up to sounds that start early or late.
- Re-encoded, not stream-copied. Copying the streams keeps every clip's encoder padding, which bloats the file and shifts every offset off the timeline the durations were measured on.
- Dev and build share nothing they shouldn't. The dev server serves the merged file from a temporary folder, and a production build copies out of it instead of moving it, so building no longer breaks the running dev server's audio.
- Published on npm as
vite-combine-audio, with WebM and MP3 output.
