Adding Sounds in React

I decided to make a small game for a project. One of the items I decided early on that I wanted to make sure I included were sound effects. Thankfully with the use of a react hook, I was able to do just that! So we are going to take a look at how that is possible.

Quick Rundown

1. You will need to run npm install use-sound in order to get this done

2. You will need to import whatever sound file you want to use into your React project

   

   All I quickly did was make a folder called "sounds" and I added my audio file there

3. Add the imports

   • import useSound from "use-sound"
   • import TestSound from "./sounds/TestSound.wav"

4. Establish the hook

   • const [playSound] = useSound(TestSound)

5. The last step is to figure out when you want the sound to play. Just to show a quick example, you can add it to an onClick event for a button. That way whenever the button is clicked, the sound will play.

   • <Button type="button" onClick={playSound}>Sound</Button>

Those are the very basic steps you will need to do to add a sound effect to your React app.

A Few More Things

There are quite a few more things you can do with this hook though. With some small modifications, you can have the sound play whenever you hover over something. Let's take a look.

1. You will have to add stop to the second part of the hook as seen below
   • const [playSound, { stop }] = useSound(TestSound)
2. After that, you will have to change the onClick event to 2 different events
   • <Button type="button" onMouseEnter={() => playSound()} onMouseLeave={() => stop()}>Sound</Button>
   • As can be seen above, we now have the onMouseEnter event that is playing the sound like before but we also have the onMouseLeave event that is now stopping the sound when the cursor leaves the element's area

With both of these small adjustments, the same sound effect will play when the mouse is hovered over the button and will stop once no longer hovering over the button. You can also change the playback rate if you really wanted to by passing the playbackRate option as can be seen in the example below.

• const [playSound, { stop }] = useSound(TestSound, { playbackRate: 4 })

If you want to add multiple hook options, like playback rate and volume, it will let you with no issues!

• const [playSound, { stop }] = useSound(TestSound, { playbackRate: 4, volume: .5 })

With the volume option now there, it can take any number between 0 and 1, with 1 being the loudest and 0 being no sound.

Sprites

To start, a sprite is one audio file that has multiple samples in it. With this hook, you can utilize this type of audio file so that way you really only need one imported. You will have to do a little bit more work for this to work, like combining all of your audio files into one. The next thing you will need to do is mark the start times (at the milliseconds mark) and length (in milliseconds) of all of your sound effects. Once that is done, all you need is to add the sprite option just like we did with the volume and playback rate options.

After that, you just need to specify which id you want to play when the button is clicked, or tied to whichever event you want.

Conclusion

There are a few other items you can adjust with this hook as well, so I highly encourage taking a look at the github repo for it that is listed below. This was just a fun way to start looking at how to add something extra to your website or web-based game.

Sources

useSound github