Comment précharger un son en Javascript ?

Question

Je fais des jeux en Javascript. Mais j'ai un problème.

Je peux précharger des images facilement grâce à la fonction "onload". Mais cela ne fonctionne pas avec l'audio ! Les navigateurs comme Chrome, Safari, Firefox... ne supportent pas les fonctions 'onload' dans l'audio !

Comment précharger un son en Javascript sans utiliser de bibliothèques JS et sans utiliser ou créer de balises HTML ? Merci pour tout !

---

EDIT : Le loadAudio est résolue par réponse de tylermwashburn ci-dessous . Merci beaucoup ! Voici mon code de travail :

mySound = loadAudio('src/ogg/music.ogg'); //Doesn't count in 'filesLoaded'!!
myImage = loadImage('src/png/home.png');

filesToLoad = 2;
filesLoaded = 0;

function loadImage(uri)
{
    var img = new Image();
    img.onload = isAppLoaded;
    img.src = uri;
    return img;
}

function loadAudio(uri)
{
    var audio = new Audio();
    //audio.onload = isAppLoaded; // It doesn't works!
    audio.addEventListener('canplaythrough', isAppLoaded, false); // It works!!
    audio.src = uri;
    return audio;
}

function isAppLoaded()
{
    filesLoaded++;
    if (filesLoaded >= filesToLoad) main();
}

Answer 1

Votre problème est que les objets audio ne prennent pas en charge l'événement "load".

Au lieu de cela, il y a un événement appelé "canplaythrough" qui ne signifie pas qu'il est entièrement chargé, mais qu'il l'est suffisamment pour qu'à la vitesse de téléchargement actuelle, il se termine avant que la piste ait eu le temps d'être lue.

Ainsi, au lieu de

audio.onload = isAppLoaded;

essayez

audio.oncanplaythrough = isAppLoaded;

Ou mieux encore ;)

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

Answer 2

J'ai essayé la réponse acceptée par tylermwashburn et cela n'a pas fonctionné dans Chrome. Je suis donc passé à autre chose et j'ai créé ceci, qui bénéficie de jQuery. Il détecte également la prise en charge des formats ogg et mp3. La valeur par défaut est ogg parce que certains experts disent qu'un fichier ogg de 192KBS est aussi bon qu'un MP3 de 320KBS, ce qui vous permet d'économiser 40% sur les téléchargements audio nécessaires. Cependant, le format mp3 est requis pour 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
  }

});

En outre : Voici un convertisseur de mp3 en ogg : http://audio.online-convert.com/convert-to-ogg Vous pouvez aussi utiliser VLC Media player pour convertir. Vérifiez le débit binaire de votre fichier mp3 en faisant un clic droit sur le fichier mp3 (sous Windows) et en allant dans les détails du fichier. Essayez de réduire de 40% le débit binaire de votre nouveau fichier 'ogg'. Le convertisseur peut émettre une erreur, alors continuez à augmenter la taille jusqu'à ce qu'elle soit acceptée. Bien sûr, testez les sons pour vérifier que la qualité est satisfaisante. De plus (et cela s'applique à moi) si vous utilisez VLC Media player pour tester vos pistes audio, assurez-vous de régler le volume à 100% ou moins, sinon vous entendrez une dégradation du son et vous pourriez penser à tort que c'est le résultat de la compression.

Answer 3

En fonction de vos navigateurs cibles, la définition de l'option prelaod de l'attribut audio peut suffire.

Answer 4

• DEMO : http://aseptik.net/demo/how-to-preload-a-sound-in-javascript/

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

Référence

• http://sharkysoft.com/tutorials/jsa/content/048.html
• jQuery : Comment précharger le son ?
• http://jsarchive.8m.com/Main/audio.html

Answer 5

Rémy a trouvé une solution pour iOS qui utilise le concept de sprite :

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

Je ne suis pas sûr qu'elle réponde directement au problème du préchargement, mais elle présente l'avantage de ne devoir charger qu'un seul fichier audio (ce qui est aussi un inconvénient, je suppose).