websfx is a tiny JavaScript library that plays UI sound effects in your browser. It has no dependencies, no audio assets, and every sound is synthesized at runtime with the Web Audio API.
Motivation
websfx helps you:
- Avoid shipping audio files for very short sounds
- Avoid recording, attribution, and separate audio-asset licensing
- Customize sound variations in code instead of editing files
Sounds are synthesized from oscillators and filtered noise. The library is ~3 kB gzipped and ships as tree-shakeable ESM, so bundlers can exclude sounds your application does not use.
Install
NPM:
npm install websfx
Play a sound:
import { click, success } from 'websfx';
click();
success();
As with other Web Audio API applications, playback may be deferred until the next user gesture in some browsers.
Sounds
websfx includes 26 sounds grouped by purpose:
- Input:
click,hover,focus,press,release,longPress,doubleClick,drag,drop,type - State:
select,deselect,open,close - Navigation:
back,forward - Feedback:
beep,success,error,warning,cancel,notification - Clipboard:
copy,paste - Misc:
remove,reaction
Options
Every sound accepts optional overrides:
click({ volume: 0.5 }); // quieter
click({ pitch: 2 }); // one octave higher
beep also accepts a tone frequency:
beep({ frequency: 440 });
Update the global configuration for all sounds:
import { beep, configure } from 'websfx';
configure({ volume: 0.8 }); // master volume from 0 to 1
configure({ volume: 0 }); // mute
beep({ volume: 0.2 }); // 0.2 * master volume
Explore the source code on GitHub or try the playground.