Un générateur de sons en JavaScript pour vos jeux et prototypes web

Vous le savez sûrement, mais grâce à l’API Audio en JavaScript, il est possible de jouer des bruits, de la musique ou n'importe quel son sur une page web.

Il est d’ailleurs conseillé de ne pas en abuser, sauf si vous fabriquez un jeu ou une expérience interactive !

Mais ajouter de l’audio sur une page pose également plusieurs problèmes :

• Chaque son alourdi significativement la page
• Plus vous avez de sons, plus vous avez de fichiers différents à charger
• Vous devez posséder la licence, ou prendre des sons libres de droits uniquement
• Vous devez précharger chaque son pour le jouer sans latence

Ou alors, vous pouvez utiliser une bibliothèque pour générer (et lancer) des sons synthétiques, directement à partir de votre code.

Et cet outil, il s’appelle ZzFX !

ZzFX pour Zuper Zmall Zound Effects

ZzFX est un micro générateur de sons synthétiques en JavaScript, et il est open-source !

Compressé, la bibliothèque propose 20 paramètres différents pour générer les sons, elle n’a aucune dépendance externe, fonctionne sur tous les navigateurs et surtout… elle pèse moins de 1 kilobyte compressée.

Le code est disponible sur GitHub ou NPM

Et une fois la librairie ajoutée à votre code, un son ressemble à ça :

zzfx(...[,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]);

Jouer

Pensez à monter le son !

Créer ses propres sons

Et le truc en plus cool avec ZzFX, c’est qu’il est possible de générer ses sons directement depuis une interface web, et de récupérer le code directement à copier-coller !

Essayer le sound designer

Il faut avouer que le fait de pouvoir générer aléatoirement un son, tout en bloquant certains paramètres est vraiment hyper utile pour gagner du temps !

Si vous êtes habitué.e des Game Jam, et notamment de la Js13K, alors cet outil vous donne un potentiel gigantesque pour vous jeux web.

Générer des musiques complètes avec ZzFXM

En voyant ZzFX, vous avez pensé :

“C’est trop cool, mais ça serait encore mieux de pouvoir générer des musiques avec du code !”

Et bien devinez quoi… C’est possible ! Grâce à l’outil ZzFXM qui utilise une version modifiée de ZzFX pour générer (et jouer) des musiques complètes !

Tester le générateur de musique

À noter

La librairie ZzFX utilise l’API audio de JavaScript via la classe AudioContext (dont la source est un buffer généré par les données fournies à ZzFX).

Cela signifie que cet outil est contraint aux même limitations que l’API Audio en général, comme l’autoplay par exemple.

Si vous ne connaissez pas les limitations des médias en HTML5, alors vous en apprendrez plus grâce à notre article sur la lecture automatique des vidéos : https://code-garage.fr/blog/lancer-des-videos-html5-automatiquement-sur-mobile