A JavaScript sound generator for your web games and prototypes

You surely know this, but thanks to the Audio API in JavaScript, it's possible to play noises, music, or any sound on a web page.

It's also advised not to overuse it, unless you're building a game or an interactive experience!

But adding audio to a page also creates several problems:

• Each sound significantly increases the page's weight
• The more sounds you have, the more different files you have to load
• You must own the license, or use only royalty-free sounds
• You must preload each sound to play it without latency

Or, you can use a library to generate (and trigger) synthetic sounds, directly from your code.

And this tool is called ZzFX!

ZzFX, for Zuper Zmall Zound Effects

ZzFX is a micro synthetic sound generator in JavaScript, and it's open-source!

Once compressed, the library offers 20 different parameters to generate sounds, has no external dependencies, works on all browsers, and above all… weighs less than 1 kilobyte compressed.

The code is available on GitHub or NPM

And once the library is added to your code, a sound looks like this:

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

Play

Remember to turn up the volume!

Creating your own sounds

And the really cool thing about ZzFX is that you can generate your sounds directly from a web interface, and grab the code straight away by copy-pasting!

Try the sound designer

You have to admit that being able to randomly generate a sound, while locking certain parameters, is really super useful for saving time!

If you're used to Game Jams, especially the Js13K, then this tool gives you huge potential for your web games.

Generating complete music with ZzFXM

Seeing ZzFX, you thought:

"This is really cool, but it would be even better to be able to generate music with code!"

Well guess what… It's possible! Thanks to the tool ZzFXM, which uses a modified version of ZzFX to generate (and play) complete music tracks!

Test the music generator

Worth noting

The ZzFX library uses JavaScript's audio API via the AudioContext class (whose source is a buffer generated from the data provided to ZzFX).

This means that this tool is subject to the same limitations as the Audio API in general, such as autoplay for example.

If you're not familiar with media limitations in HTML5, you can learn more thanks to our article on automatically playing videos: https://code-garage.fr/blog/lancer-des-videos-html5-automatiquement-sur-mobile