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

You can have a JSP page in which the audio files stored in the Database can be accessed and loaded into a Map with some key for your audio file and value as your audio file. And playing can be done just by calling the audio file.

Answer 2

var audioFiles = [
    "http://www.teanglann.ie/CanC/nua.mp3",
    "http://www.teanglann.ie/CanC/ag.mp3",
    "http://www.teanglann.ie/CanC/dul.mp3",
    "http://www.teanglann.ie/CanC/freisin.mp3"
];
    
function preloadAudio(url) {
    var audio = new Audio();
    // once this file loads, it will call loadedAudio()
    // the file will be kept by the browser as cache
    audio.addEventListener('canplaythrough', loadedAudio, false);
    audio.src = url;
}
    
var loaded = 0;
function loadedAudio() {
    // this will be called every time an audio file is loaded
    // we keep track of the loaded files vs the requested files
    loaded++;
    if (loaded == audioFiles.length){
    	// all have loaded
    	init();
    }
}
    
var player = document.getElementById('player');
function play(index) {
    player.src = audioFiles[index];
    player.play();
}
    
function init() {
    // do your stuff here, audio has been loaded
    // for example, play all files one after the other
    var i = 0;
    // once the player ends, play the next one
    player.onended = function() {
    	i++;
        if (i >= audioFiles.length) {
            // end 
            return;
        }
    	play(i);
    };
    // play the first file
    play(i);
}
    
// we start preloading all the audio files
for (var i in audioFiles) {
    preloadAudio(audioFiles[i]);
}

<audio id="player"></audio>

Answer 3

The way that I understood this question is as follows: you want to use the function to preload audio files. The best way I can think to do this is to define them all individually. If you would like to Embed your audio clips into a webpage, here is an example:

<audio src="audioclip.mp3" controls autoplay preload loop>
    <p>This web browser does not support mp3 format</p>
</audio>

Controls: this element states weather or not you would like the user to have play pause, etc. controls on the audio file.

Autoplay: this element states weather or not you would like the audio file to play automatically after the webpage is loaded. If you choose this option for your project, I recommend using the preload element as well (which I will explain later on) and not using the controls element (if of course that is what you want).

Preload: This is the element your question has been specifically looking for. If you include this element, the audio file will preload as the webpage is loading.

Loop: This element repeatedly plays the audio file until the user stops it (if controls is enabled)

the part where it says "This web browser does not support mp3 format" should only show up on the users screen if there browser is outdated and does not support mp3 format.

In order to disable an element, simply don't include it in the code.

Hope this helped!

UPDATE the element should be enough for what you are trying to do.

Answer 4

If you want more control than the <audio> 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.)