How to preload sound in Javascript?

Question

I can easily upload images thanks to the onload function. But this does not work with audio. Browsers like Chrome, Safari, Firefox, etc. They do not support onload functions in the audio tag.

How to preload sound in Javascript without using JS libraries and without using or creating HTML tags?

Answer 1

Your problem is that Audio objects do not support the load event.

Instead, there is an event called "canplaythrough", which does not mean that it is fully loaded, but loaded enough that at the current download speed it will be completed by the time the track had enough time to play.

So instead

 audio.onload = isAppLoaded; 

to try

 audio.oncanplaythrough = isAppLoaded; 

Or even better ..;)

 audio.addEventListener('canplaythrough', isAppLoaded, false); 

Answer 2

I tried the accepted tylermwashburn answer and it didn't work in Chrome. So I went over and created this, and it benefited jQuery. He also sniffs for ogg and mp3 support. The default value is ogg, because some experts say that the 192KBS ogg file is as good as 320KBS MP3, so you save 40% of the required audio download. However mp3 is required for IE9:

 // Audio preloader $(window).ready(function(){ var audio_preload = 0; function launchApp(launch){ audio_preload++; if ( audio_preload == 3 || launch == 1) { // set 3 to # of your files start(); // set this function to your start function } } var support = {}; function audioSupport() { var a = document.createElement('audio'); var ogg = !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '')); if (ogg) return 'ogg'; var mp3 = !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); if (mp3) return 'mp3'; else return 0; } support.audio = audioSupport(); function loadAudio(url, vol){ var audio = new Audio(); audio.src = url; audio.preload = "auto"; audio.volume = vol; $(audio).on("loadeddata", launchApp); // jQuery checking return audio; } if (support.audio === 'ogg') { var snd1 = loadAudio("sounds/sound1.ogg", 1); // ie) the 1 is 100% volume var snd2 = loadAudio("sounds/sound2.ogg", 0.3); // ie) the 0.3 is 30% var snd3 = loadAudio("sounds/sound3.ogg", 0.05); // add more sounds here } else if (support.audio === 'mp3') { var snd1 = loadAudio("sounds/sound1.mp3", 1); var snd2 = loadAudio("sounds/sound2.mp3", 0.3); var snd3 = loadAudio("sounds/sound3.mp3", 0.05); // add more sounds here } else { launchApp(1); // launch app without audio } // this is your first function you want to start after audio is preloaded: function start(){ if (support.audio) snd1.play(); // this is how you play sounds } }); 

Next: Here is the mp3 for the ogg converter: http://audio.online-convert.com/convert-to-ogg Or you can use VLC Media Player to convert. Check your mp3 bitrate by right-clicking on the mp3 file (on Windows) and navigating to the files. Try to reduce by 40% when choosing a new bitrate for the new ogg file. The converter may give an error, so continue to increase the size until it is accepted. Of course, test sounds are of satisfactory quality. Also (and this applies to me), if you use VLC Media Player to check your audio tracks, make sure you set the volume to 100% or lower, otherwise you will hear sound degradation and you may erroneously assume that this is a result of compression.

Answer 3

Depending on your target browsers, it may be sufficient to set the prelaod attribute in the audio tag.

Answer 4

 //Tested on Chrome, FF, IE6 function LoadSound(filename) { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("load-sound").innerHTML = '<embed src="' + filename + '" controller="1" autoplay="0" autostart="0" />'; } } xmlhttp.open("GET", filename, true); xmlhttp.send(); } 

Link

• http://sharkysoft.com/tutorials/jsa/content/048.html
• jQuery: how do you load the sound?
• http://jsarchive.8m.com/Main/audio.html

Answer 5

Remy came up with a solution for iOS that uses the concept of sprites:

http://remysharp.com/2010/12/23/audio-sprites/

Not sure if it accesses the preload directly, but it has the advantage that you only need to download one audio file (which is also a drawback, I suppose).

Answer 6

Have you tried making an ajax request for a file? You would not show / use it until it was fully loaded.

eg. jQuery: how do you load the sound? (you will not need to use jQuery).