react-sounds 🔊

✨ Why react-sounds?

• 🪶 Lightweight: Only loads JS wrappers, audio files stay on CDN until needed
• 🏗️ Lazy Loading: Sounds are fetched only when they're used
• 📦 Offline Support: Download sounds for self-hosting with the included CLI
• 🎯 Simple API: Intuitive hooks and components
• 🔊 Extensive Library: Hundreds of categorized sounds (UI, notification, game)

How does react-sounds compare?

| | react-sounds | use-sound | howler.js | |---|---|---|---| | Built-in sounds | 72+ | None | None | | React hooks & components | Yes | Hooks | None | | Bundle impact | ~0 KB (CDN-loaded) | User-bundled | ~7 KB gzipped | | TypeScript | Built-in | Built-in | @types | | Next.js ready | Yes | Manual setup | Manual setup | | Last release | Mar 2026 | Feb 2025 | Sep 2023 |

react-sounds wraps howler.js and adds a curated sound library, React components, and zero-config CDN delivery. use-sound and howler.js are great standalone options if you bring your own audio files.

🚀 Quick Start

npm install react-sounds howler
# or
yarn add react-sounds howler

import { useSound } from 'react-sounds';

function Button() {
  const { play } = useSound('ui/button_1');
  
  return (
    <button onClick={() => play()}>
      Click Me
    </button>
  );
}

📚 Documentation

For complete documentation including advanced usage, visit reactsounds.com/docs

🎮 Live Demo

Try the interactive demo at reactsounds.com

🔍 Explore All Sounds

Browse and play all available sounds at reactsounds.com/sounds

💻 Browser Support

Works in all modern browsers that support the Web Audio API (Chrome, Firefox, Safari, Edge)

📄 License

MIT © Lukas Schneider