In modern web applications, adding sound effects can greatly enhance the user experience. Whether you're creating a game, an interactive page, or just want to add a touch of personality, sound effects can add an extra layer of engagement. For instance, I recently added several sound effects to my blog, which inspired me to write about it.

Before diving into the code, let's first discuss the different ways to play sounds in a web application. One common method is to use the HTML5 audio tag. This allows you to specify a source for an audio file and play it by changing the .play() method. Another option is to use the available React packages like use-sound. These packages provide a simple and intuitive API for controlling audio elements in React. In this article, we'll cover both methods, so you can choose the one that best suits your needs.

HTML5 audio tag

Here, we will focus on using the HTML5 audio tag to play sound effects in React, as it is the simplest method and requires no additional libraries.

Step 1: Adding the audio tag

To start, we need to add an audio tag to our React component. This tag will act as a container for our sound effect. Here's what the basic code looks like:

Copycopy code to clipboard
1import React, { useRef } from 'react';
2
3const SoundEffect = () => {
4  const audioRef = useRef(null);
5
6  return (
7    <audio ref={audioRef}>
8      <source src="sound.mp3" type="audio/mpeg" />
9      <p>Your browser does not support the audio element.</p>
10    </audio>
11  );
12};
13
14export default SoundEffect;

In this code, we use the useRef hook to create a reference to the audio tag. This reference will allow us to access and control the audio element in our component. The source tag specifies the source for the audio file. In this example, we're using an .mp3 file, but you can use any audio format that is supported by the browser.

Step 2: Playing the sound effect

Now that we have the audio tag in place, we can play the sound effect by calling the .play() method on the reference. To do this, we'll add a button to our component that will trigger the sound effect. Here's what the code looks like:

Copycopy code to clipboard
1import React, { useRef } from 'react';
2
3const SoundEffect = () => {
4  const audioRef = useRef(null);
5
6  const handlePlay = () => {
7    audioRef.current.play();
8  };
9
10  return (
11    <div>
12      <audio ref={audioRef}>
13        <source src="sound.mp3" type="audio/mpeg" />
14        <p>Your browser does not support the audio element.</p>
15      </audio>
16      <button onClick={handlePlay}>Play Sound</button>
17    </div>
18  );
19};
20
21export default SoundEffect;

In this code, we've added a button with an onClick handler that calls the handlePlay function. This function uses the reference to the audio tag to call the .play() method.

Step 3: Adding additional sound effects

If you want to add multiple sound effects to your component, you can simply add multiple audio tags and reference them in separate functions. Here's what the code would look like:

Copycopy code to clipboard
1import React, { useRef } from 'react';
2
3const SoundEffect = () => {
4  const audioRef1 = useRef(null);
5  const audioRef2 = useRef(null);
6
7  const handlePlay1 = () => {
8    audioRef1.current.play();
9  };
10
11  const handlePlay2 = () => {
12    audioRef2.current.play();
13  };
14
15  return (
16    <div>
17      <audio ref={audioRef1}>
18        <source src="sound1.mp3" type="audio/mpeg" />
19        <p>Your browser does not support the audio element.</p>
20      </audio>
21      <audio ref={audioRef2}>
22        <source src="sound2.mp3" type="audio/mpeg" />
23        <p>Your browser does not support the audio element.</p>
24      </audio>
25      <button onClick={handlePlay1}>Play Sound 1</button>
26      <button onClick={handlePlay2}>Play Sound 2</button>
27    </div>
28  );
29};
30
31export default SoundEffect;

In this example, we've added two audio tags and two buttons, each with its own onClick handler that calls a different handlePlay function. This allows us to play different sound effects by clicking the corresponding button.

Using use-sound package

The use-sound package is a popular React hook that makes it easy to play sound effects in your applications. It provides a simple and intuitive API for controlling audio elements in React, allowing you to add sound effects with just a few lines of code. I've used this package in several of my projects, and I highly recommend it.

To start using use-sound, you'll need to install it using yarn/npm:

Copycopy code to clipboard
1yarn add use-sound

Once you've installed the package, you can import it into your React component and use it to play sound effects. Here's an example:

Copycopy code to clipboard
1import React from 'react';
2import useSound from 'use-sound';
3
4const SoundEffect = () => {
5  const [playSound] = useSound('sound.mp3');
6
7  return (
8    <div>
9      <button onClick={playSound}>Play Sound</button>
10    </div>
11  );
12};
13
14export default SoundEffect;

In this example, we use the useSound hook to play a sound effect. The hook takes the path to the audio file as an argument and returns an array containing a function to play the sound. We can then trigger the sound effect by calling this function, as we did in the previous example using the audio tag.

The useSound package also provides additional features and options, such as the ability to control the volume, looping, and playback rate of the audio. For more information on how to use these features, be sure to check out the official documentation.

In conclusion, using the useSound package is a simple and convenient way to add sound effects to your React applications. With its intuitive API, it's a great alternative to using the HTML5 audio tag, especially if you're looking for a more streamlined solution.

Bonus

I previously mentioned that this blog post was inspired by me adding a sound effect to my blog. You can find it at the page header; both the sound and theme toggle icons have sound effects.

There are many free sound effect resources, such as https://freesound.org/. For example, the sound you hear when you turn the volume up on my website is taken from there.