Gérer et charger les sons

Dans cet article, on va continuer avec la gestion des ressources dans un jeu HTML5, en programmant le chargement des sons et à la définition de la fonction LoadSounds.

function ResourcesHandler(callback) {
	/* déclaration de propriété */
        // ...
        /* chargement des sprites et des images */
        // ...
        /* contrôle de téléchargement d'image */
        // ...
        /* conception du chargeur */
        // ...
        /* chargement des sons */
	this.LoadSound = function(url, formats) {
		this.loading = true;
		var sound = new Audio();
		sound.src = url+"."+formats[0];
		sound.formatIndex = 0;
		sound.volume = 0.05;
		this.resNumber++;
		sound.rh = this;
		sound.addEventListener("canplaythrough", function() {
			this.rh.resLoaded++;
			this.rh.CheckLoaded();
		}, false);
		sound.addEventListener("error", function(e) {
			if(++this.formatIndex >= formats.length) {
				this.rh.errors.push([url, e.currentTarget.error.code]);
				this.rh.CheckLoaded();
			} else {
				this.src = url+"."+formats[this.formatIndex];
			}
		});
		return sound;
	}
}

Juste pour quelques précisions :

Cette fonction crée un élément audio, l’enregistre dans une variable sonore, puis définit la source et le volume.

Comme pour les images, augmentez le nombre de sons à charger et enregistrez une référence au ResourceHandler.

Pour les éléments audio, il existe l’événement canplaythrough, qui exécute une fonction lorsque le son peut être joué. Nous passons en argument une fonction qui incrémente le nombre de ressources chargées et appelle CheckLoaded.

L’événement d’erreur des sons devra plutôt être géré, car certains navigateurs ne prennent pas en charge certains formats audio largement utilisés (pour le moment, l’opéra ne prend pas en charge le mp3 et Internet Explorer 11 ogg vorbis), par conséquent pour que l’audio fonctionne sur tous les navigateurs, vous devrez charger les sons dans les deux formats, utiliser celui supporté par le navigateur, et passer un tableau de 2 éléments en argument “formats”.

En fait, si une erreur se produit, la fonction essaiera de le charger avec l’autre format. Par exemple:

LoadSound("sounds/attack", ["mp3", "ogg"]);

➡️ Créer des jeux HTML5, le guide

Formations de Develop4fun

• Formation WordPress : le cours complet
• Parcours pour devenir un programmeur web
• Créez vos jeux avec UNITY3D
• Parcours pour devenir un programmeur de jeux vidéo
• Apprenez à créer des jeux 2D facilement avec LUA et LÖVE 2D
• Parcours pour devenir un programmeur de jeux vidéo
• Apprenez à programmer en C#
• Apprenez à programmer en C++