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
Top comments (0)