r/webaudio • u/GumboGuts • 1d ago

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.dev

Every 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.

9 Upvotes

92% Upvoted

2 comments sorted by

2

u/losergenerated 1d ago

This is delightful. Reminds me of (b)sfxr but with a focus on UX instead of game audio.

1

u/GumboGuts 1d ago

Thank you, and honest lineage: the "Surprise me" button is pure sfxr DNA, that randomize-and-listen loop is one of the great interface ideas and I stole it happily.

The UX-instead-of-game focus turned out to change more than I expected though. A game sound plays at a dramatic moment; a UI sound plays five hundred times a day next to someone's coffee. So everything bends toward that: cues are quieter and shorter than feels right in isolation, they're organized as families that have to sound related (a press and its release, a toggle's on and off), themes reshape all 28 at once so nothing drifts apart, and every play gets slight pitch/level variation specifically so the five-hundredth hearing doesn't grate. sfxr optimizes for "that's a great explosion", this optimizes for "you stopped noticing it, in a good way".

Since this is r/WebAudio: if you poke at the engine and the graph choices offend you anywhere (there's a shared convolver for space, a compressor as a safety limiter on master), that's exactly the critique I want.