@manaslab/sound-lab

A lightweight React library for interactive UI sound effects. Enhance user engagement with haptic-like audio feedback, featuring reliable debouncing and a customizable control panel.

✨ Features

• 🔊 Interactive Feedback: Add sounds to clicks, hovers, and toggles effortlessly.
• 🎛️ Sound Lab UI: Built-in control panel for users to adjust volume, toggle mute, and switch profiles.
• 🎧 Rich Profiles: Comes with 9+ engineered sound profiles (Glass, Thock, Mechanical, Sci-Fi, etc.).
• ⚡ Performance Optimized: Uses Web Audio API with intelligent debouncing to prevent audio spam.
• 🛡️ Type-Safe: Fully typed with TypeScript.

📦 Installation

npm install @manaslab/sound-lab lucide-react
# or
yarn add @manaslab/sound-lab lucide-react

🚀 Quick Start

1. Wrap your application

Wrap your root component with SoundProvider.

import { SoundProvider } from '@manaslab/sound-lab';

function App() {
  return (
    <SoundProvider>
      <YourApp />
    </SoundProvider>
  );
}

2. Add the Sound Controls

Allow users to customize their experience (optional but recommended).

import { SoundControls } from '@manaslab/sound-lab';

const Layout = () => (
  <>
    <SoundControls isDark={true} activeColor="purple" />
    {/* ... content */}
  </>
);

3. Use in Components

Trigger sounds on interaction using the useSound hook.

import { useSound } from '@manaslab/sound-lab';

const Button = () => {
    const { playSound } = useSound();

    return (
        <button 
            onClick={() => playSound('click')}
            onMouseEnter={() => playSound('hover')}
            className="btn-primary"
        >
            Click Me
        </button>
    );
};

🎚️ Sound Profiles

The library includes several carefully tuned oscillator-based sound profiles:

| Profile | Description | | :--- | :--- | | Glass | High-pitched, clean, crystalline pings. (Default) | | Thock | Deep, "creamy" mechanical keyboard sound. | | Mechanical | Sharp, clicky switch sounds. | | Console | Retro game console blips. | | Sci-Fi | Futuristic sweeps and zaps. | | Lofi | Mellow, softened tones. | | Minecraft | Organic "plops" and "dings". |

📜 License

MIT © Manas Barman