web-dev-qa-db-fra.com

Comment précharger un son en Javascript?

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, etc. ne prennent pas en charge les fonctions onload dans la balise audio.

Comment précharger un son en Javascript sans utiliser les bibliothèques JS et sans utiliser ni créer de balises HTML?

javascriptaudiopreload
50
Manuel Ignacio López Quintero

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 est suffisamment chargé qu'au taux de téléchargement actuel, il se terminera lorsque la piste aura eu suffisamment de temps pour être lue.

Donc au lieu de

audio.onload = isAppLoaded;

essayer

audio.oncanplaythrough = isAppLoaded;

Ou mieux encore ..;)

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

J'ai essayé la réponse acceptée par tylermwashburn et cela n'a pas fonctionné dans Chrome. J'ai donc continué et créé ceci et il bénéficie de jQuery. Il renifle également le support ogg et mp3. La valeur par défaut est ogg car certains experts disent qu'un fichier ogg 192KBS est aussi bon qu'un MP3 320KBS, vous économisez donc 40% sur vos téléchargements audio requis. Cependant, le 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 mp3 en ogg: http://audio.online-convert.com/convert-to-ogg Ou vous pouvez utiliser le lecteur multimédia VLC pour convertir. Vérifiez votre débit binaire mp3 en cliquant avec le bouton droit sur le fichier mp3 (sous Windows) et en accédant aux détails du fichier. Essayez de réduire de 40% lors de la sélection de votre nouveau bitrate pour votre nouveau fichier 'ogg'. Le convertisseur peut générer une erreur, continuez donc d'augmenter la taille jusqu'à ce qu'il soit accepté. Bien sûr, le test sonne pour une qualité 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 audio et pourriez penser à tort que c'est le résultat de la compression.

10
Jonathan Tonge

Avez-vous essayé de faire une demande ajax pour le fichier? Vous ne l'auriez pas montré/utilisé jusqu'à ce qu'il soit complètement chargé.

Par exemple. jQuery: Comment préchargez-vous le son? (vous n'auriez pas à utiliser jQuery).

0
two7s_clash

Selon vos navigateurs cibles, la définition de l'attribut prelaod sur la balise audio peut être suffisante.

0
Damien Wilson
//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

0
Luca Filosofi

Remy a trouvé une solution pour iOS qui utilise le concept Sprite:

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

Pas sûr qu'il traite directement la précharge, mais a l'avantage que vous n'avez besoin que de charger un seul fichier audio (ce qui est aussi un inconvénient, je suppose).

0
DA.