Free Sounds For Your Vibe-Coded Projects! — soundcn & ZzFX

When I make any kind of project, especially if it’s just a basic landing page, one of the first things my audience notices is how interactive the user interface is. Did the button make a sound when I clicked it? Does the notification make a noise? Is there a little loading sound? Audio is a key component of making a project feel more like an actual app than just a static webpage.

But getting audio can be difficult. Either you have to subscribe to some kind of stock audio service, search through random creative commons repositories with questionable quality, or tell your agent to “add some sound” and hope they don’t come back with a hallucination of some broken implementation of the web audio api that won’t actually work in production. Both of these repos take different approaches to solving this issue, and between the two of them they can handle basically any scenario your vibe app could throw at them!

soundcn is a collection of 700+ pre-made sound effects such as button clicks, notifications, transitions, etc. All of these sounds are implemented as self contained typescript modules that don’t require any external dependencies or CORS issues. Each sound is included as an inline base64 encoded data uri, and includes a useSound hook to play it back using the web audio api. To install one of these sounds, it’s just like installing shadcn modules: run a single command, and the file will be dropped right into your codebase. Check out the full list of sounds on soundcn.xyz before choosing one, since you can preview each sound directly on the site. Most of these sounds were taken from kenney, which is licensed under CC0 and therefore free to use commercially.

ZzFX is a mini web audio synth (less than 1kb compressed!) that allows you to create custom sounds using only javascript. With 20 parameters and a single function call, you can create everything from coin pickups to explosions! The best part about zzfx is the online zzfx sound designer. Just start clicking around until you find a sound you like, and it will give you a snippet of code that you can copy/paste into your project. No files, no assets, nothing! ZzFX was originally designed for game jams where resources are limited, but it also works great for traditional web apps.

1How to add sounds to your project

To use soundcn, you will need a react app with shadcn installed. Head over to soundcn.xyz and browse the catalog. Once you find a sound you like, install it. The file will be added to your codebase, so there are no runtime requirements or network requests when playing the sound.

npx shadcn add @soundcn/click-soft

To use zzfx, either install it using npm, or include the micro version in your html. Next, head over to the sound designer and create your sound. Copy the resulting array.

npm install zzfx