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 I play them. How do I load all of these files on page load?

Here's is a rough idea of what I'm doing:

http://jsfiddle.net/L0c9ccx9/20/

audio.src = ...;
audio.load();
audio.play();

Specify `preload="auto"`, and show the code you're using... – l'L'l Jun 25 '15 at 21:09 — l'L'l, Jun 25 '15 at 21:09

score 52 · Accepted Answer · edited Jul 17 '15 at 18:41

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>

Mobile devices are restricted to play audio only after user input due to security and bandwidth constraints. In this example there is no user input but you can trigger the play method via a button. There are other ways to handle this better explained at http://stackoverflow.com/questions/7856502/play-a-sound-via-javascript-event-in-ios-5-html5-app. — Juank, Jul 13 '15 at 01:49
i also encountered another iOS issue with the code above and found help here: https://stackoverflow.com/questions/49792768/js-html5-audio-why-is-canplaythrough-not-fired-on-ios-safari — gaugau, Apr 12 '18 at 10:32
Is it just the play that is not working for iPhone or the preloading as well? — kojow7, Sep 20 '19 at 18:18
If you're only looking to preload audio, with a given url, you will only need the `preloadAudio()` function from this answer, then change `loadedAudio` (inside the event listener) to your own function - this will be called when your audio has been loaded and cached. — Nanoo, Jul 25 '20 at 20:25

score 6 · Answer 2 · answered Jul 17 '15 at 06:27

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.

score 3 · Answer 3 · answered Jul 16 '15 at 23:59

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.)

Preload multiple audio files

3 Answers3

Linked