Sound Effects Demo

Direct HTML5 Audio - Quick & Simple

The Code (3 Lines!)

const playSound = (file, volume = 0.5) => {
  const audio = new Audio(`/sounds/${file}`);
  audio.volume = volume;
  audio.play();
};

Try it out:

How it works:

new Audio(url) - Creates an audio element
audio.volume - Sets volume (0.0 to 1.0)
audio.play() - Plays the sound
.catch() - Handles errors gracefully

💡 Tips:

Place sound files in /public/sounds/
Use MP3 format for best compatibility
Keep files under 50KB for fast loading
Volume range: 0.0 (silent) to 1.0 (full)
First sound requires user interaction (browser policy)

📝 Missing Sound Files?

If you hear no sound, you need to add MP3 files to /public/sounds/

Required files: click1.mp3, click2.mp3, click3.mp3, success.mp3, error.mp3

Download free sounds from Pixabay or Mixkit

How to use in your projects:

// 1. Simple button with sound
<button onClick={() => {
  const audio = new Audio('/sounds/click.mp3');
  audio.volume = 0.5;
  audio.play();
}}>
  Click me!
</button>

// 2. With other logic
<button onClick={() => {
  // Play sound first
  const audio = new Audio('/sounds/click.mp3');
  audio.play();
  
  // Then do your action
  handleSubmit();
}}>
  Submit
</button>

// 3. Reusable function
const playSound = (file) => {
  const audio = new Audio(`/sounds/${file}`);
  audio.volume = 0.5;
  audio.play();
};

<button onClick={() => {
  playSound('success.mp3');
  showNotification('Saved!');
}}>
  Save
</button>