Hundreds of ready-to-play sound effects for your React applications
Add delight to your UI with just a few lines of code
Demo • Documentation • Sound Explorer
- 🪶 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)
| 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.
npm install react-sounds howler
# or
yarn add react-sounds howlerimport { useSound } from 'react-sounds';
function Button() {
const { play } = useSound('ui/button_1');
return (
<button onClick={() => play()}>
Click Me
</button>
);
}For complete documentation including advanced usage, visit reactsounds.com/docs
Try the interactive demo at reactsounds.com
Browse and play all available sounds at reactsounds.com/sounds
Works in all modern browsers that support the Web Audio API (Chrome, Firefox, Safari, Edge)
MIT © Lukas Schneider