Preload multiple audio files

Question

I have a single audio control on my webpage. I wish to use it to play multiple very short audio files depending on the state of the page. I do not wish to load the files as

Answer 1

If you want more control than the element provides you can use Web Audio.

Fetch your files in advance with XMLHttpRequest and pass them to decodeAudioData(). You then have AudioBuffer objects in memory that you can trigger playback of as required.

Here's a demo of several short samples being preloaded and played back gaplessly (source).

(Note: due to a ridiculous Chrome bug the above demo is currently Firefox-only. This is purely a codec issue: browser support for Web Audio is actually quite good. In a real application you should probably offer at least Vorbis and AAC for maximum compatibility.)