Tactile, auditory feedback significantly elevates web user interactions—think of the subtle "click" of a button, the crisp notification pop, or a success chime on task completion.

However, loading external audio assets (MP3s/WAVs) introduces extra HTTP requests, network latency, and browser autoplay restriction headaches.

I developed Tonely to synthesize UI micro-interaction sound effects procedurally in real-time directly inside the browser using the native Web Audio API—requiring zero external audio files.

Why Procedural Audio?

Zero Asset Overhead: No MP3 downloads, no asset hosting, and zero network latency.

Instantaneous Playback: Synthesized instantly via Web Audio Oscillators for 0ms trigger latency.

Microscopic Footprint: Adds virtually no bundle size to your application.

Global Mute & Pitch Controls: Easily configurable volume and pitch controls to respect user preference settings.

TypeScript

import { tonely } from 'tonely';

// Trigger subtle UI feedback on button click
const handleButtonClick = () => {
tonely.play('pop');
};

// Trigger procedural success chime
const handleFormSubmit = () => {
tonely.play('success');
};

Add tactile polish to your web applications without fetching a single audio file.

🔗 Discover Tonely on npm: npmjs.com/package/tonely

javascript, #react, #webdev, #opensource, #architecture