DEVELOPER PREVIEW · v0.1.0
Interface sounds.
Zero files.
Nineteen sounds for hovers, presses, toggles, confirmations, and money moments, synthesized with Web Audio. Each one renders once, then every play is a single audio node.
bun add @bloxwap/sfxBrowsers · SSR-safe · Zero dependencies
import { bind, play, setVolume } from '@bloxwap/sfx';
// 1. Wire every data-sound-* attribute, now and later.
// <button data-sound-press data-sound-release>Save</button>
const unbind = bind();
// 2. Or play a sound directly.
async function save() {
try {
await fetch('/api/save', { method: 'POST' });
play('success');
} catch {
play('error');
}
}
// 3. Mix it into your product.
setVolume(0.6);Every data-sound-* element in the page now has sound
LIVE · WEB AUDIO
Sound board
Hover or click a pad, or press its key. Change the volume, rate, and pan, then copy the call.
Hover and ambience
Controls
Feedback
Money
play('chime');Tip: press the keys on the pads to play the board from your keyboard. 19 sounds, no audio files.
DECLARATIVE
Attributes, not event handlers
Hover the tabs, press the buttons, flip the switches. Keyboard works too: Tab to a button and press Enter or Space.
Deposit
Amounts from 1 to 10,000 succeed. Try 0 or 20000 to hear the error.
Preferences
Everything above is wired with data-sound-* attributes and a single bind(root) call.
One node per play.
Every sound renders once with an OfflineAudioContext. After that a play is a single buffer source, 5–75× cheaper than rebuilding the synth graph.
Mixed, not stacked.
A shared bus with a limiter, a master volume, voice stealing, and retrigger guards keep a busy interface from clipping.
Safe by default.
SSR-safe imports. play() never throws and waits for the first user gesture. Disabled controls stay silent.
A SMALL API. ABOUT 5 KB.
From one attribute
to a sound design system.
Start with bind(), then add sounds for the moments that matter in your product.