Clark Lavery

Clark Lavery

Web, Games & Graphics Programmer

vite-combine-audio

vite-combine-audio

Vite plugin · published on npm · used by Odam and Knights & Crosses

Dozens of sound files go into vite-combine-audio, and one merged file comes out; importing a sound returns its start time and duration within that file.

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.mp3 still 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.