websfx

🔊 Play synthesized UI sound effects in the browser.

No dependencies. No audio assets. Sounds are generated at runtime with the Web Audio API. Import what you need with tree-shakable ESM.

Demo

Try out the sound effects in the playground.

Quick Start

import { click, success, configure } from 'websfx';

configure({ volume: 0.5 });

click();
success();

Install

NPM:

npm install websfx

CDN:

<script src="https://unpkg.com/websfx@latest/dist/index.umd.min.js"></script>

Usage

ES Modules:

import { click, success } from 'websfx';

click();
success();

CommonJS:

const { click, success } = require('websfx');

click();
success();

UMD:

<script src="https://unpkg.com/websfx@latest/dist/index.umd.js"></script>
<script>
  const { click } = window.websfx;

  click();
  websfx.success();
</script>

Every sound accepts optional overrides:

import { click } from 'websfx';

click({ volume: 0.5 }); // quieter
click({ pitch: 2 }); // one octave higher

Configure

configure() applies partial updates:

import { beep, configure } from 'websfx';

configure({ volume: 0.8 }); // master volume from 0 to 1 (default 1)
configure({ volume: 0 }); // mute all sounds

beep({ volume: 0.2 }); // 0.2 * master volume

It returns the configuration:

const { volume } = configure();

console.log(volume); // 1

Sounds

| Group | Sounds | | --- | --- | | 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 |

All sounds take optional SoundOptions:

interface SoundOptions {
  volume?: number; // 0 to 1 multiplier (default 1)
  pitch?: number; // frequency multiplier (default 1)
}

beep also accepts a tone frequency:

beep({ frequency: 440 });

Notes

• The AudioContext is created lazily on the first sound and shared for the lifetime of the session.
• When the browser autoplay policy blocks audio, the context is resumed automatically on the next user gesture that plays a sound.
• Calling a sound in environments without Web Audio (SSR, Node.js) is a safe no-op.

Release

Release is automated with Release Please.

License

MIT