Les problèmes de préchargement audio en Javascript
Je suis en train de faire un cross-device/navigateur d'image et de son de préchargement pour un GameAPI je suis en train de travailler sur. Un fichier audio de précontrainte, et d'émettre un rappel une fois terminé.
Le problème est que l'audio ne sera pas commencer à charger sur la lenteur de chargement de la page, mais l'habitude de travailler sur le deuxième essai, probablement parce qu'il cache et il sait qu'il existe.
J'ai rétréci vers le bas à l'audio.fonction load (). Se débarrasser d'elle résout le problème, mais il est intéressant de noter, mon motorola droid besoins de la fonction.
Quelles sont les expériences que vous avez eues avec HTML5 audio préchargement?
Voici mon code. Oui, je sais que le chargement des images dans une fonction distincte pourrait provoquer une condition de concurrence 🙂
var resourcesLoading = 0;
function loadImage(imgSrc) {
//alert("Starting to load an image");
resourcesLoading++;
var image = new Image();
image.src = imgSrc;
image.onload = function() {
//CODE GOES HERE
//alert("A image has been loaded");
resourcesLoading--;
onResourceLoad();
}
}
function loadSound(soundSrc) {
//alert("Starting to load a sound");
resourcesLoading++;
var loaded = false;
//var soundFile = document.createElement("audio");
var soundFile = document.createElement("audio");
console.log(soundFile);
soundFile.autoplay = false;
soundFile.preload = false;
var src = document.createElement("source");
src.src = soundSrc + ".mp3";
soundFile.appendChild(src);
function onLoad() {
loaded = true;
soundFile.removeEventListener("canplaythrough", onLoad, true);
soundFile.removeEventListener("error", onError, true);
//CODE GOES HERE
//alert("A sound has been loaded");
resourcesLoading--;
onResourceLoad();
}
//Attempt to reload the resource 5 times
var retrys = 4;
function onError(e) {
retrys--;
if(retrys > 0) {
soundFile.load();
} else {
loaded = true;
soundFile.removeEventListener("canplaythrough", onLoad, true);
soundFile.removeEventListener("error", onError, true);
alert("A sound has failed to loaded");
resourcesLoading--;
onResourceLoad();
}
}
soundFile.addEventListener("canplaythrough", onLoad, true);
soundFile.addEventListener("error", onError, true);
}
function onResourceLoad() {
if(resourcesLoading == 0)
onLoaded();
}
Il est difficile de diagnostiquer le problème, car il n'indique aucune erreur et seulement échoue de temps en temps.
- C'est une chienne, mais j'ai réussi à faux, il en vient de charger audio standard AJAX texte demandes. Je sais que cela semble stupide, mais une fois que les données en cache, il est mis en cache et BOOM: préchargé audio. Il y a des questions où les navigateurs ne les chargez pas plus d'un flux de données multimédia, j'ai eu le même problème avec la vidéo, je viens de charger les vignettes et des créé le lecteur HTML5 à la volée. Je trouve que faire semblant que l'AJAX astuces le navigateur en pense que c'est pas les médias.
- Intéressant, je vais essayer ça.
Vous devez vous connecter pour publier un commentaire.
Je l'ai eu à travailler. La solution était assez simple en fait:
Fondamentalement, il fonctionne comme ceci:
Si il n'est pas évident, le
load
fonction indique les navigateurs et les périphériques qui prennent en charge il pour commencer à charger, et puis le son tente immédiatement deplay
avec levolume
pratiquement à zéro. Donc, si leload
fonction n'est pas assez, le fait que le son "besoin" d'être joué est suffisant pour déclencher une charge sur tous les appareils que j'ai testé.La
load
fonction peut effectivement être redondant maintenant, mais en fonction de la inconsistiency avec de l'audio de la mise en œuvre, il n'a probablement pas de mal à l'avoir.Edit: Après avoir testé ce sur Opera, Safari, Firefox et Chrome, il ressemble à la définition de la
volume
à 0 sera encore de précontrainte de la ressource.videoElem.mute = true
... probablement la même propriété existe pour les éléments audio, ainsicanplaythrough
se déclenche lorsque suffisamment de données a mis en mémoire tampon sans doute qu'il pourrait jouer non-stop à la fin, si vous avez commencé à jouer sur cet événement. Le HTML élément Audio est conçu pour la diffusion en continu, de sorte que le fichier peut ne pas avoir complètement terminé le téléchargement par le temps, cet événement se déclenche.Contraste avec les images qui déclenche l'événement une fois qu'ils sont complètement téléchargé.
Si vous naviguez à partir de la page et l'audio n'a pas fini complètement le téléchargement, le navigateur n'a probablement pas de cache à tous. Cependant, si il a fini complètement le téléchargement, il a probablement mis en cache, ce qui explique le comportement que vous avez vu.
Je recommanderais le HTML5 AppCache pour vous assurer que les images et l'audio sont certainement mis en cache.
L'AppCache, comme suggéré ci-dessus, pourrait être votre seule solution pour conserver les données audio en cache à partir d'un navigateur-session à l'autre (ce n'est pas ce que vous avez demandé, non?). mais gardez à l'esprit la quantité limitée de l'espace, certains navigateurs offrent. Safari permet à l'utilisateur de modifier cette valeur dans les paramètres, mais la valeur par défaut est de 5 mo - à peine assez pour sauver un tas de chansons, surtout si d'autres sites qui sont fréquentés par vos utilisateurs utilisent AppCache ainsi. Aussi IE <10 ne prend pas en charge AppCache.
Bien alors j'ai couru dans le même problème récemment, et mon truc, c'était d'utiliser une simple requête ajax pour charger le fichier entièrement une fois (qui se terminent dans le cache), puis en les chargeant à nouveau le son directement à partir du cache et de l'utilisation de la liaison des événements
canplaythrough
.À l'aide de Buzz.js que mon HTML5 audio de la bibliothèque, mon code est fondamentalement quelque chose comme ça: