TapTone

Your UI deserves to sound as good as it looks.

Beautiful interaction sounds for modern websites. Synthesized live with the Web Audio API, with no audio files, zero dependencies, and one import.

TapTone is a lightweight collection of interaction sounds for the web. It adds subtle tactile feedback to buttons, links, forms, toggles, and completed actions without requiring developers to manage sound assets or write event listeners.

Simply import the package, add a data attribute, and you're done.

Install

npm install tap-tone

Requirements

TapTone is ESM-only.

It works in all modern browsers supporting:

• ES Modules
• Web Audio API

Importing TapTone during SSR is completely safe. Sound playback only occurs in the browser.

Quick Start

Import TapTone once.

import "tap-tone";

Now simply add data attributes.

<button data-tone-click>
  Click Me
</button>

<button data-tone-success>
  Save
</button>

<button data-tone-copy>
  Copy
</button>

<a data-tone-hover>
  Documentation
</a>

<button data-tone-tick>
  Dark Mode
</button>

That's it.

No initialization.

No configuration.

No audio assets.

Available Attributes

| Attribute | Trigger | Default Sound | | ---------- | ------- | ------------- | | data-hover-tap | pointerenter | Hover | | data-hover-tick | pointerenter | Hover | | data-tone-click | click | Click | | data-tone-success | click | Success | | data-tone-copy | click | Copy | | data-tone-error | click | Error | | data-tone-droplet | click | Droplet | | data-tone-tick | click | tick | | data-tone-beep | click | Beep | | data-tone-keypress | click | Press | | data-tone-drum | click | KeyPress |

Sounds

| Sound | Suggested Use | | ------ | ------------- | | Hover | Navigation, menus | | Click | Buttons | | Success | Copy, Save, Complete | | Error | Failed actions | | Copy | Clipboard | | tick | Switches,Navigation | | Droplet | Floating actions | | Beep | Alerts | | KeyPress | Inputs |

Framework Support

TapTone works anywhere HTML works.

• React
• Next.js
• Vue
• Astro
• Svelte
• SolidJS
• Vite
• Vanilla JavaScript

Just import it once.

import "tap-tone";

Why TapTone?

Modern interfaces should feel alive.

TapTone gives users subtle audio feedback that makes interactions feel more responsive and tactile without increasing bundle size or requiring sound assets.

Instead of downloading MP3 files or wiring event listeners, simply add a data attribute and TapTone handles the rest.

Design Philosophy

TapTone is not an audio engine.

It's a carefully crafted collection of UI interaction sounds designed specifically for modern web applications.

Every sound is synthesized using the Web Audio API, resulting in an incredibly lightweight package with no bundled audio files.

Browser Support

TapTone supports all modern browsers that implement the Web Audio API.

• Chrome
• Edge
• Firefox
• Safari

License

MIT

Made with ❤️ for developers who care about delightful user experiences.