Comment ajouter des effets sonores et de la musique à un jeu de navigateur

Utilisez les sons intégrés gratuits ou importez vos propres fichiers MP3, WAV, OGG ou M4A, puis dites à l'IA quand chacun se joue ; Go Bananas harmonise le volume sonore et s'occupe des téléphones.

Le son, c'est la moitié des sensations d'un jeu. Une pièce qui tinte, un saut qui siffle et un coup qui résonne disent aux joueurs ce qui s'est passé sans qu'ils aient à lire quoi que ce soit. La musique installe l'ambiance et donne à un petit jeu un air fini. Ce guide présente les sons gratuits utilisables tout de suite, l'import de vos propres sons, comment demander à l'IA de les utiliser, l'outil audio pour les développeurs, et comment obtenir un bon son sur téléphone.

Pourquoi le son compte dans les jeux

Le feedback. Chaque action importante doit faire un bruit : ramasser, être touché, marquer, perdre une vie. Les joueurs remarquent plus un son manquant qu'un son médiocre.
Les sensations. Le même saut paraît plus lourd ou plus léger selon son bruitage. Des effets courts et percutants rendent les commandes plus réactives.
L'information. Le son peut avertir de ce qui se passe hors de l'écran : un ennemi derrière vous, un chrono sur le point de finir.
L'ambiance. La musique et le fond sonore disent aux joueurs si le jeu est tendu, loufoque ou calme.

Des sons intégrés, gratuits

Go Bananas propose un petit pack d'effets sonores que tout le monde peut utiliser dans ses jeux, publié sous licence CC0 (ni autorisation ni crédit nécessaires). Chacun se trouve à l'adresse https://gobananas.co/sfx/<name>.mp3 :

Nom	Ce que c'est
`gunshot`	Un coup de feu
`reload`	Une arme qu'on recharge
`hit`	Un impact
`footstep`	Un bruit de pas
`pickup`	Un objet qu'on ramasse
`menu_click`	Un clic de menu
`zombie_moan`	Un zombie qui gémit
`zombie_attack`	Un zombie qui attaque
`zombie_death`	Un zombie qui meurt
`ambient_tension`	Une boucle d'ambiance tendue d'environ 10 secondes

L'IA ne connaît pas ce pack si vous ne le lui signalez pas, alors donnez-lui l'adresse dans votre demande :

Quand le joueur ramasse une clé, jouer https://gobananas.co/sfx/pickup.mp3.

Utilisez toujours l'adresse complète qui commence par https://. Les jeux tournent dans un bac à sable (sandbox) où les adresses courtes comme /sfx/pickup.mp3 ne se chargent pas.

Importer vos propres sons

Vous pouvez importer des effets sonores, des voix et de la musique en MP3, WAV, OGG ou M4A. Utilisez la fenêtre Upload Asset (importer un fichier), depuis l'onglet Assets (ressources) ou l'éditeur. Si vous déposez un fichier audio sur le panneau de création, il ouvre cette fenêtre pour vous. Il vous faut un compte vérifié, et vous cochez une case pour confirmer que vous avez le droit d'utiliser ce son : votre propre création, sous licence, ou dans le domaine public.

Limite	Valeur
Taille de fichier	5 Mo par fichier
Durée	120 secondes par fichier
Stockage audio	50 Mo par compte
Pochette et tags intégrés	256 Ko au maximum

Ce que le site fait de votre audio

Chaque fichier importé est traité de la même façon, quel que soit son format :

Le volume sonore est harmonisé à -16 LUFS, un niveau standard pour les jeux et le streaming : un enregistrement faible et un enregistrement fort finissent au même volume.
Le silence au début est coupé, pour que le son se joue dès qu'il est déclenché. Le silence à la fin est conservé.
Il est converti en MP3 à 44,1 kHz. Les clips de 5 secondes ou moins sont traités comme des effets sonores et enregistrés en mono à 96 kbit/s ; les clips plus longs sont traités comme de la musique et enregistrés en stéréo à 128 kbit/s.
Les tags et la pochette sont supprimés.
Le fichier d'origine n'est pas conservé, seulement le MP3.

Vous verrez un avertissement si l'enregistrement sature (distordu à ses passages les plus forts) ou si son volume était anormalement faible ou fort au départ. La saturation ne se corrige pas après coup : mieux vaut exporter une version plus propre.

Couper et régler le volume

Chaque son de vos ressources a un bouton de lecture, une forme d'onde et sa durée. Vous pouvez couper un son dans l'appli pour n'en garder qu'une partie ; le fichier n'est pas coupé, et le jeu ne joue que la partie conservée.

Dans l'onglet Assets de l'éditeur, + Attach to game (associer au jeu) ajoute un son au jeu que vous modifiez. Les sons associés ont un curseur de volume de 0 à 100, réglé sur 100 au départ : vous pouvez ainsi baisser la musique ou adoucir un bruit de pas sans toucher au code. Les changements sont enregistrés automatiquement.

Demander à l'IA d'utiliser vos sons

Tapez @ dans la zone de création ou de modification et choisissez un son. Son nom est inséré entre guillemets, et vous décrivez quand il se joue :

Jouer "coin" quand le joueur ramasse une étoile, et "boing" quand il saute. Mettre "forest-theme" en boucle comme musique de fond, à faible volume.

Quand vous créez un jeu, l'IA est informée de tous les sons que vous avez importés. Quand vous modifiez un jeu qui a des fichiers associés, elle est informée des sons associés : associez donc ceux que vous voulez qu'elle utilise.

Pour les développeurs : l'outil audio

Chaque jeu Go Bananas reçoit window.__audio, un petit outil qui fonctionne dans le bac à sable, débloque le son sur iPhone et suit le bouton muet du site. Utilisez-le au lieu de new Audio() ou de créer votre propre AudioContext.

// L'adresse d'un son importé vient de GAME_ASSETS (nom = nom du fichier sans extension).
const coinUrl = window.GAME_ASSETS.audio['coin'].url;
const musicUrl = window.GAME_ASSETS.audio['forest-theme'].url;
const jumpUrl = 'https://gobananas.co/sfx/pickup.mp3';   // un son intégré

// Chargez les sons à l'avance pour qu'ils se jouent sans délai.
Promise.all([__audio.load(coinUrl), __audio.load(jumpUrl)]);

// Démarrez l'audio au premier toucher ou clic du joueur (nécessaire sur iPhone).
startButton.addEventListener('click', () => {
  __audio.init();
  __audio.playMusic(musicUrl, { volume: 0.4, loop: true, fadeInMs: 1000 });
  startGame();
});

function onCoinCollected() {
  // Une hauteur légèrement différente à chaque fois évite que les sons répétés paraissent robotiques.
  __audio.play(coinUrl, { volume: 0.8, rate: 0.95 + Math.random() * 0.1 });
}

Les principales méthodes :

init() : appelez-la depuis un toucher ou un clic. Elle débloque l'audio sur iPhone.
load(url) : télécharge et décode un son, et renvoie une promesse. Chargez avant de jouer ; un son pas encore chargé ne se joue qu'une fois décodé.
play(url, { volume, pan, rate }) : joue un effet sonore. pan le place à gauche ou à droite, rate change la vitesse et la hauteur.
play3D(url, x, y, z, camera, { volume, maxDist, rate }) : joue un son depuis un point d'une scène 3D, plus faible avec la distance.
playMusic(url, { volume, loop, fadeInMs }) : joue de la musique. Par défaut, elle tourne en boucle, au volume 0,5, avec un fondu d'entrée d'une demi-seconde.
stopAll(), setMasterVolume(v) et setMuted(true ou false).

Passez toujours une adresse complète. Le nom ou l'ID d'un son seul ne fonctionne pas. Le volume auquel un son est joué est votre volume principal, multiplié par le curseur de l'onglet Assets, multiplié par le volume que vous passez dans le code.

Le son sur téléphone

Rien ne se joue avant que le joueur touche l'écran. Les téléphones, surtout les iPhone, bloquent l'audio jusqu'à ce que le joueur touche l'écran. Un écran « Touchez pour commencer » qui appelle __audio.init() règle le problème.
Le bouton muet du site marche sur tous les jeux. Les joueurs peuvent couper le son de n'importe quel jeu avec le bouton son du site, et l'outil audio le suit : ne créez donc pas un jeu qui ne se comprend qu'avec le son.
Gardez des fichiers légers. Des effets courts et une boucle musicale compacte se chargent plus vite en données mobiles.

Conseils de mixage

Gardez la musique moins forte que les effets. Une musique autour de 0,3 à 0,5 de volume laisse de la place aux sons qui portent de l'information.
N'empilez pas les copies d'un même son. Si vingt pièces sont ramassées d'un coup, jouez le son une fois ou quelques fois, pas vingt.
Ajoutez de la variation. Un petit changement aléatoire de rate rend naturels les bruits de pas et les impacts répétés.
Donnez à chaque événement important son propre son. Les joueurs apprennent vite les sons ; si vous réutilisez le même son pour différentes choses, ils perdent cette information.
Faites attention à la durée. Les effets sonores marchent mieux sous une seconde. Une longue traîne empiète sur le son suivant.
Bouclez proprement. Une musique faite pour tourner en boucle doit commencer et finir au même endroit de la mesure.