Cómo precarga un sonido en Javascript?

Probé la respuesta aceptada por tylermwashburn y no funcionó en Chrome. Así que seguí adelante y creé esto y se beneficia de jQuery. También huele para ogg y soporte mp3. El valor predeterminado es ogg porque algunos expertos dicen que un archivo ogg de 192KBS es tan bueno como un MP3 de 320KBS, por lo que ahorra un 40% en sus descargas de audio requeridas. Sin embargo mp3 es necesario para 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
  }

});

Además: Aquí hay un convertidor de mp3 a ogg: http://audio.online-convert.com/convert-to-ogg O puedes usar VLC Reproductor multimedia para convertir. Compruebe su tasa de bits mp3 haciendo clic derecho en el archivo mp3 (en Windows) y yendo a los detalles del archivo. Trate de reducir en un 40% al seleccionar su nueva tasa de bits para su nuevo archivo 'ogg'. El convertidor puede lanzar un error, así que siga aumentando el tamaño hasta que se acepte. Por supuesto, prueba sonidos para una calidad satisfactoria. También (y esto se aplica a mí) si está utilizando VLC Media player para probar sus pistas de audio, asegúrese de configurar el volumen al 100% o por debajo o de lo contrario escuchará degradación de audio y podría pensar erróneamente que es el resultado de la compresión.

Dependiendo de sus navegadores de destino, configurar el prelaod el atributo en la etiqueta audio puede ser suficiente.

Remy ideó una solución para iOS que utiliza el concepto sprite:

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

No estoy seguro de que se dirija directamente a la precarga, pero tiene la ventaja de que solo necesita cargar un archivo de audio (que también es un inconveniente, supongo).

¿Intentaste hacer una solicitud ajax para el archivo? No lo mostrarías / usarías hasta que estuviera completamente cargado.

Por ejemplo jQuery: ¿Cómo se precarga el sonido? (no tendría que usar jQuery).

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

Referencia

• http://sharkysoft.com/tutorials/jsa/content/048.html
• jQuery: ¿Cómo precarga el sonido?
• http://jsarchive.8m.com/Main/audio.html