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…

L’intelligence artificielle s’invite dans chaque pixel

L’intelligence artificielle s’invite dans chaque pixel

Il y a encore quelques années, retoucher une photo demandait des heures de travail minutieux sur Photoshop, une maîtrise des calques, des masques et des courbes de niveaux. En 2026, la donne a changé. Les outils IA de retouche photo ne se contentent plus de proposer...

Les 10 meilleurs outils IA gratuits pour les développeurs en 2026

Les 10 meilleurs outils IA gratuits pour les développeurs en 2026

L'intelligence artificielle transforme la manière dont les développeurs écrivent, testent et déploient leur code. En 2026, de nombreux outils IA sont accessibles gratuitement, offrant des fonctionnalités qui auraient semblé impossibles il y a quelques années. Que vous...

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.