Gérer et charger les sons

HTML5 et Game Developement

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 :

PropriétéDescription
url
L’URL du son à charger (sans extension)
formatsun tableau de formats audio grâce au quel on peut charger (mp3, ogg)

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

Sudoku Quest Banner

Formations de Itamde

« 

Itamde est également une école de programmation en ligne.

Itamde

Apprenez ce que vous voulez, à votre rythme

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pourriez être intéressé par…

Pourquoi créer un SaaS sans audience mène droit à l’échec

Pourquoi créer un SaaS sans audience mène droit à l’échec

La fièvre entrepreneuriale autour des SaaS (Software as a Service) n'a jamais été aussi intense. L'arrivée des intelligences artificielles a décuplé cette tendance en rendant le développement plus accessible que jamais. ChatGPT, GitHub Copilot et consorts permettent...

Restez informé des dernières actualités et mises à jour

Accédez au contenu réservé

Découvrez les coulisses de nos projets, des ressources exclusives et l’avancée de nos créations en temps réel.

Inscrivez-vous à la newsletter

Recevez nos actualités, nos réflexions créatives et les nouveautés de l’atelier directement dans votre boîte mail.

Suivez-nous

Rejoignez notre communauté sur les réseaux pour suivre nos projets au quotidien et échanger avec nous.