CODEWITHSUNDEEP
html
Baz
Baz

Reputation: 13185

Preload multiple audio files

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();

Upvotes: 37

Views: 29753

Answers (3)

Juank
Juank

Reputation: 6196

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>

Upvotes: 53

sarora
sarora

Reputation: 520

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.

Upvotes: 6

hexwab
hexwab

Reputation: 1841

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

Upvotes: 4

Related Questions