Home
Categories
Audio & Video
Hundreds of Ready-to-Use UI Sounds – react-sounds

Hundreds of Ready-to-Use UI Sounds – react-sounds

aediliclabs Added 7 months ago
Live Demo Download Source Code

Description:

react-sounds is a React library that provides hundreds of ready-to-use sound effects for web applications.

It wraps Howler.js to deliver a simple API for playing UI sounds, notifications, and game audio effects with minimal setup.

Key Features

  • ðŸŠķ Lightweight: Only loads JS wrappers, audio files stay on CDN until needed
  • 🔄 Lazy Loading: Sounds fetch on first use
  • ðŸ“Ķ Offline Support: CLI tool for downloading sounds
  • ðŸŽŊ Simple API: Intuitive hooks and components
  • 🔊 Extensive Library: Hundreds of categorized sounds

Use Cases

  • UI Feedback: Add subtle click/tap sounds to buttons and interactive elements
  • Notifications: Play distinct sounds for different alert types
  • Gaming: Implement game audio effects without heavy asset bundles
  • Accessibility: Provide audio cues for visually impaired users

Installation & Usage

Install the package:

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

Basic usage with hooks:

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

API Methods

  • useSound(soundName): Returns { play, stop, volume }
  • <SoundPlayer />: Component version with the same props
  • preloadSounds([]): Cache multiple sounds upfront

FAQ

Q: How are sounds loaded?
A: Sounds fetch from CDN on first play, then cache in browser memory.

Q: Can I use custom sounds?
A: Yes – host your audio files and pass URLs instead of sound IDs.

Q: What’s the average sound file size?
A: Most UI sounds are <50KB, longer effects may be 100-300KB.

Add Comment