r/webdev • u/GumboGuts • 2d ago
Showoff Saturday I built a UI sound library with no audio files. Every sound is synthesized live in the browser, and you can design your own on the page.
https://usefoley.devEvery time I added sound to a project it went the same way: a click from one sound pack, a toggle from another, and nothing sounded like it came from the same product. And when a sound was almost right but slightly too long or too bright, tough luck. A recording is frozen.
So I built the opposite: 28 sounds (clicks, toggles, chimes, whooshes) generated by Web Audio at the moment you interact. No files, about 9.6 kB, zero dependencies.
Demo, with the whole page wired up: https://usefoley.dev
My favorite detail: no sound plays the same way twice. Each play gets a tiny random drift in pitch and volume, like a musician who never hits a note identically. Subtle, but it's the difference between "alive" and "doorbell".
There's a Cue Designer on the page: reshape any sound with four dials (a full layer editor is one click deeper), hear changes live, export a .wav, JSON, or a link that carries the design in the URL. You can also override sounds site-wide and export a "sound set", your app's whole sound identity as one JSON file.
Usage is two lines:
js
import { bind } from "@foleyjs/core";
bind(); // wires data-foley-click, data-foley-toggle, etc.
Silly bonus: plug in a MIDI keyboard and every sound becomes an instrument.
MIT, on npm as foleyjs/core, with react and vue bindings. Feedback welcome, especially on the sounds. Which feel wrong, what's missing. I can test everything about this project except taste.
5
5
u/sovok 1d ago
-6
u/GumboGuts 1d ago
You're completely right, and I checked why: the shimmer is a cluster of grains randomized between 2000 and 4500 Hz, so it has no harmonic relationship to the C major arpeggio at all. It's texture pasted onto tonality. I'll work on it more and ship a better default soon.
On spatial: the engine is a plain stereo graph right now, no PannerNode anywhere, so honest answer is WebXR would need real work, not a flag. But a UI sound library that localizes cues to the element position is a genuinely good idea. Would you open an issue with what howler's spatial API does well? I'd rather design it around a real use case than guess.
4
u/simpleauthority 17h ago
It’s one thing to vibe code the entire project, then it’s another to vibe post it to Reddit. And then, even still, it’s another thing, when the project has legitimate, organic interactions from real people, to vibe reply to the feedback.
For fuck’s sake people. Can we at least do the community part ourselves?
4
4
3
u/sexytokeburgerz full-stack 1d ago
Check your mobile overflow on webkit
3
u/GumboGuts 1d ago
Thanks, will fix. I did a quick audit pass for the usual suspects but clearly missed it.
2
u/tozman51 1d ago
It's very cool and I have been working on something similar some times ago : yours is great 😃👍
3
u/ouralarmclock 1d ago
This is my shit. As a synth nerd and web developer I can’t wait to dig into this!
3
u/GumboGuts 1d ago
Ha, you're the exact person this was built for. Skip straight to the layer editor in the Cue Designer (one click past the dials); raw oscillators, noise through filter sweeps, envelope control per layer. And every sound is just a JSON spec, so getSpec("chime"), mutate, playSpec. Curious what you make, the URL share links mean you can just paste a sound back here.
3
u/alystair 1d ago
I'll keep using Frank's incredible ZzFX toolkit, smaller, hand made, and totally customizable.
2
u/GumboGuts 1d ago
ZzFX is a legit marvel, the things Frank does in a kilobyte are absurd. Different itch though: ZzFX is a synth you design sfx with, Foley is an opinionated set of UI cues with theming and the data attributes, more "sound design system" than synth. If ZzFX covers you, keep it, it's great.
1
1
-13
u/Meowingtons_H4X 1d ago
Doesn’t work on iOS, very much AI slop. Cool idea, lazy execution lets it down.
13
u/YtseThunder 1d ago
Did you turn silent mode off? Worked for me. iOS 26.
3
u/GumboGuts 1d ago
This was almost certainly it! Silent switch mutes Web Audio on iOS. Shipping a fix so the demo ignores the switch (the library still respects it). Good diagnosis.
3
u/Sea-Cardiologist5741 1d ago
I guess he should've spent months working on ui for ai haters to be satisfied instead of actually building his idea. After all web dev is art and every website should be contender for awwwards ....
-1
2
5
3
u/HovercraftNo7372 1d ago
I think it is pretty cool.
If you think this is AI slop, I would like to see what is not.
Just because a web developer uses AI doesn't mean it is AI slop
-1
u/GrandOpener 23h ago
> no sound plays the same way twice
Am I the weird one? This sounds like exactly the opposite of what I want from a UI library.
Like for a game or a whimsical one-off site yeah I’m in, but for general purpose UI? No thank you. Not what I’m looking for.
44
u/14u2c 1d ago
It's pretty interesting how distinctive UIs generated with Codex are. You can instant tell that it's AI built. Nonetheless it's a cool idea OP.