DEV Community

Cover image for Une musique de jeu évolutive grâce à JavaScript

Une musique de jeu évolutive grâce à JavaScript

Bastien Calou on April 07, 2022

Le week-end dernier, j'ai eu le plaisir de composer la musique de Blobby Zombie, un jeu créé en 48h seulement par mon ami Simon et son camarade Pie...
Read full post
Collapse
 
bcalou profile image
Bastien Calou •

J'ai volontairement écarté toute ligne de JavaScript du contenu de l'article, mais un mot tout de même !

Manipuler des audio en JS est très direct :

music = new Audio("music.mp3"); // Charger un fichier
music.volume = 0.5; // Régler le volume
music.play(); // Lancer la lecture
music.stop(); // Arrêter la lecture
Enter fullscreen mode Exit fullscreen mode

Pour avancer de 15 secondes dans une piste audio :

music.currentTime += 15;
Enter fullscreen mode Exit fullscreen mode

J'ai appris au passage qu'on ne pouvait pas jouer deux fois le même fichier en parallèle (ce qui pourtant est nécessaire si deux bruitages identiques sont joués de façon rapprochée). Le problème se résoud avec la fonction cloneNode :

music.cloneNode().play();
music.cloneNode().play(); // Deuxième lecture en parallèle
Enter fullscreen mode Exit fullscreen mode

Par ailleurs, le nombre de joueurs étant très variable, chaque nouveau zombie ne fait pas progresser la musique d'un cycle précisément, contrairement à ce qui est expliqué dans l'article pour simplifier. Nous avons une fonction progressTo(progression) qui prend un nombre entre 0 et 1, reflétant l'évolution du jeu (0 étant de le début, et 1 la fin). Ainsi, appeler progressTo(0.5) signifie que le jeu est à la moitié de sa progression (la moitié des joueurs sont des zombies). La musique peut alors avancer en fonction du nombre de cycles disponibles et, éventuellement, sauter des cycles si nécessaire.

C'est tout ! Le reste du travail n'était que du JS classique.

Cependant, mon implémentation n'est pas ultra précise. Mon code utilise des setTimeout et setInterval, et rien ne garantit qu'ils seront appelé exactement au bon moment.

Je n'avais pas le temps d'expérimenter au-delà, et c'est totalement spéculatif, mais peut-être faudrait-il aller voir du côté des service workers, ou de WebAssembly, ou d'une autre manière de gérer l'audio que j'ignore totalement ?

Collapse
 
sousacaio profile image
Caio frias •

Pretty cool Bastien!

Collapse
 
simonjamain profile image
simonjamain • • Edited

Je trouve que c'est vraiment super bravo monsieur !

Collapse
 
bcalou profile image
Bastien Calou •

<3