SFX

@bloxwap/sfx provides 19 interface sounds synthesized with Web Audio. Use it for presses, toggles, confirmations, errors, and notifications, with no audio downloads or runtime dependencies in the core package.

Project site · Documentation · GitHub · npm

Install

npm install @bloxwap/sfx

The package uses ES modules and runs in modern browsers. Imports are safe during server rendering; playback runs in the browser after a user interaction.

Add sounds to controls

Add sound attributes to your HTML:

<button data-sound-press data-sound-release>Save</button>
<button data-sound-toggle>Toggle theme</button>

Then bind them from your browser code:

import { bind } from '@bloxwap/sfx';

const unbind = bind();

// Call unbind() when you remove the binding.

bind() handles pointer and keyboard input, including controls added later. Disabled controls stay silent. Set an attribute's value to choose a sound, such as data-sound-press="tick".

Use React

Bind a component after it mounts and remove the listeners when it unmounts:

'use client';

import { useEffect, useRef } from 'react';
import { bind } from '@bloxwap/sfx';

export function SaveButton() {
  const ref = useRef<HTMLButtonElement>(null);
  useEffect(() => {
    if (!ref.current) return;
    return bind(ref.current);
  }, []);

  return <button ref={ref} data-sound-press data-sound-release>Save</button>;
}

Use play('success') from @bloxwap/sfx for feedback from your own event handlers, and setEnabled() and setVolume() to control sound preferences.

Go further

• Sound board — listen to the sounds before choosing them.
• API reference — playback, volume, mute, and offline rendering.
• Native apps and WAV export — export sounds with sfx-wav and the optional node-web-audio-api dependency.

SFX is released under the MIT license.