Procedural Web Audio API • 0 KB Audio Assets • < 1.5 KB JS

Give Your Web UI a Voice. Without Shipping a Single MP3.

Modern SaaS apps deserve rich tactile feedback. Tonely synthesizes clean, pleasant micro-interactions at runtime with zero external audio files, zero HTTP requests, and zero network latency.

$pnpm add tonely

Interactive Audio Studio

The Tonely Soundboard

Audition every procedural preset in real-time. Tweak sound palettes, master volume, and pitch multiplier.

Vol:75%

Pitch:1.0x

Palette:

State & Feedback

Success (200 OK)

Pleasant rising major chord arpeggio for saved records & mutations

tonely.success()

State & Feedback

Error (4xx / 5xx)

Gentle dissonant double-tone for invalid inputs & server errors

tonely.error()

State & Feedback

Warning

Dual-tone attention cue for unsaved changes & critical warnings

tonely.warning()

Notifications

Info Ping

Soft crisp sine chime for notifications, tooltips & badges

tonely.info()

Micro-interactions

Tactile Click

Ultra-fast micro transient (25ms) for buttons, tabs & nav links

tonely.click()

Micro-interactions

Bubble Pop

Bouncy upward frequency sweep for modal opens & dropdowns

tonely.pop()

Inputs

Switch Toggle

Dual-direction tone: rises when enabled, drops when disabled

tonely.toggle()

Actions

Delete / Trash

Soft muted descending double-tone for record removals

tonely.delete()

Sensory Polish

Crystal Glass

High-resonance crystalline shimmer with bandpass resonance

tonely.glass()

Sensory Polish

Liquid Drop

Organic modulated water droplet sound for likes & reactions

tonely.bubble()

Supercharge Your Agent Workflow

AI Prompts Hub for Cursor, Claude & v0

Copy and paste these pre-crafted instructions directly into Cursor Composer, Claude 3.7, v0, ChatGPT, or Antigravity to instrument your entire application in seconds.

Cursor / Claude / Copilot

Integrate Tonely with Sonner & Shadcn UI

Wrap your existing toast notifications to automatically trigger harmonic procedural sounds.

I want to integrate 'tonely' into my Next.js / React project. 
Please install 'tonely' and wrap my toast helper (Sonner / Shadcn UI) so that:
- toast.success() plays tonely.success()
- toast.error() plays tonely.error()
- toast.warning() plays tonely.warning()
- toast.info() plays tonely.info()
Ensure it is 100% SSR-safe and works seamlessly inside client components.

Next.js 15 / Cursor

Sound Feedback for Next.js Server Actions & Forms

Add instant tactile feedback on form submit, success on 200, error on failure.

Please update my form submissions and Next.js Server Actions using 'tonely':
1. When the user clicks the submit button, trigger tonely.click()
2. If the Server Action returns success or HTTP 200, play tonely.success()
3. If the Server Action returns validation errors or fails, play tonely.error()
Import { tonely } from 'tonely' and keep all audio calls strictly client-side.

TanStack Query / Axios

Automatic Fetch / Axios Response Status Interceptor

Automatically chime on any API call depending on HTTP status code.

I am using fetch / TanStack Query in my web app. 
Please configure a centralized helper using 'tonely' that maps HTTP responses:
- Status 2xx -> tonely.fromStatus(response.status) [success chime]
- Status 4xx / 5xx -> tonely.fromStatus(response.status) [gentle error tone]
Ensure audio playback is smooth, non-blocking, and respects user gestures.

v0 / Antigravity / Cursor

Add Micro-interactions to Buttons & Modals

Enhance navigation, dialogs, and toggle switches with responsive micro sounds.

Enhance my UI components using the 'tonely' library:
- Add tonely.click() to primary action buttons and tab switches
- Add tonely.pop() when modals or dropdown menus open
- Add tonely.toggle(activeState) to switches and checkboxes
- Add tonely.delete() when deleting items
Keep it clean, subtle, and responsive with zero external audio assets.

Universal DX & Full Isomorphic Safety

Clean Integrations Across Any Stack

Works server-side (Next.js SSR / Server Components / Actions) as a safe no-op, and client-side across React, Vue, Svelte, and Vanilla JS.

react.tsx

'use client';

import { useTonely } from 'tonely/react';

export function CheckoutButton() {
  const { success, error, click } = useTonely({ theme: 'glass' });

  const handleCheckout = async () => {
    click(); // Instant tactile response on click
    try {
      await processPayment();
      success(); // 🎶 Harmonic rising chime
    } catch (err) {
      error();   // ⚠️ Gentle warning double-tone
    }
  };

  return (
    <button onClick={handleCheckout} className="btn-primary">
      Complete Purchase
    </button>
  );
}

Why Procedural Web Audio API Wins

A side-by-side comparison between conventional MP3 asset hosting and Tonely.

Metric	External Audio Files (MP3 / WAV)	Tonely (Procedural)
Total Asset Download	50 KB – 300 KB+	0 KB (Zero assets!)
Library Size (gzipped)	~15 KB (Howler) + Assets	< 1.5 KB
First-Sound Latency	120ms – 450ms (Network Lag)	< 1ms (Instant synthesis)
Server-Side Safety (SSR)	Throws without "window" guards	100% Isomorphic Safe No-op
Dynamic Pitch & Themes	Requires separate audio tracks	Mathematical realtime adjustment

Ready to give your web applications tactile auditory polish?

Install the zero-dependency Tonely package now and start delighting your users with instant harmonic cues.

Star on GitHub