Comment précharger un son en Javascript?
je peux précharger des images facilement grâce à la fonction onload . Mais ça ne marche pas avec l'audio. Navigateurs comme Chrome, Safari, Firefox,etc. ne prenez pas en charge les fonctions onload dans la balise audio.
Comment puis-je précharger un son en Javascript sans utiliser les bibliothèques JS et sans utiliser ou créer des balises HTML?
6 réponses
votre problème est que les objets Audio ne supportent pas l'événement 'load'.
au lieu de cela, il y a un événement appelé 'canplaythrough' qui ne veut pas dire qu'il est complètement chargé, mais assez chargé qu'au taux de téléchargement actuel, il se terminera au moment où la piste aura eu assez de temps pour jouer.
donc au lieu de
audio.onload = isAppLoaded;
essayer
audio.oncanplaythrough = isAppLoaded;
ou mieux encore.. ;)
audio.addEventListener('canplaythrough', isAppLoaded, false);
j'ai essayé la réponse acceptée par tylermwashburn et il n'a pas fonctionné dans Chrome. Je suis donc passé à autre chose et j'ai créé ceci et il bénéficie de jQuery. Il renifle aussi pour ogg et le soutien de mp3. La valeur par défaut est ogg parce que certains experts disent QU'un fichier ogg 192KBS est aussi bon qu'un MP3 320KBS, donc vous économisez 40% sur vos téléchargements audio requis. Cependant mp3 est nécessaire 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-ogg: http://audio.online-convert.com/convert-to-ogg Ou vous pouvez utiliser VLC Media player pour convertir. Vérifiez votre débit mp3 en cliquant avec le bouton droit de la souris sur le fichier mp3 (dans Windows) et en allant dans les détails du fichier. Essayez de réduire de 40% lors de la sélection de votre nouveau débit pour votre nouvelle ogg fichier. Le convertisseur peut lancer une erreur, alors continuez à augmenter la taille jusqu'à ce que soit accepté. Bien sûr, des sons de test pour une qualité satisfaisante. Aussi (et cela s'applique à moi) si vous utilisez VLC Media player pour tester votre audio les pistes s'assurent que vous réglez le volume à 100% ou moins ou autrement vous entendrez la dégradation audio et pourrait penser à tort qu'il est le résultat de la compression.
en fonction de vos navigateurs cibles, le réglage de l'attribut prelaod sur l'étiquette audio peut être suffisant.
Remy a trouvé une solution pour iOS qui utilise le concept sprite:
http://remysharp.com/2010/12/23/audio-sprites /
N'est pas sûr qu'il s'adresse directement à la précharge, mais a l'avantage que vous n'avez besoin de charger qu'un seul fichier audio (ce qui est aussi un inconvénient, je suppose).
avez-vous essayé de faire une demande ajax pour le fichier? Vous ne l'avez pas montré / utilisé jusqu'à ce qu'il soit complètement chargé.
E. G. jQuery: comment Préchargez-vous le son? (vous n'auriez pas à utiliser 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();
}
référence