DEV Community

Cover image for Adding Sound to a React Project
David Guzman
David Guzman

Posted on

Adding Sound to a React Project

Adding Sounds to a react project is fairly simple. In this blog, I'll demonstrate how you can implement sound to your react project!

Prerequisites

  • Have NPM installed
  • Have Node installed
  • Familiarity with React and React hooks
  • Have an awesome React Project in mind (Perhaps a music portfolio site for a band you like)

1. Create your react project.

npx create-react-app sound-demo
First start by creating your react project.

  • npx create-react-app sound-demo

2. Go to your App.js component in the src folder and delete the logo import and everything inside the div.

App.js

3. Add an NPM package called react-sound.

  • npm i react-sound or yarn add react-sound

Adding Background Music to your site

4. Import the song you would like to play and Sound from react-sound.

Importing Sound

5. Add the <Sound /> to your app with a few props:

  • url- Link to the music you imported
  • playStatus- We will set it to Sound.status.PLAYING.
  • playFromPosition- You could adjust the milliseconds of when the music should start playing, I would just leave it at 300.
  • onLoading- This is a prop that from the component,this gets called when the sound is loading, You can either add props to the your functional component or you can destructure your props. It would be assigned to handleSongLoading.
  • onPlaying- This gets called when the song is playing. It would be assigned to handleSongPlaying.
  • onFinishedPlaying- This function will get called when the song is finished playing. It would be assigned to handleSongFinishedPlaying.
  • (Optional) loop: you can set loop to either true or false. It would default to false.

6. Now if you run npm start or yarn start, your sound should be working!

Sound Component


Displaying a Button that Allows You to Play and Pause the Music

6. We should add a state to check whether the music should be playing or not.

  • First import useState from react
  • Then add our state which would be a boolean value, const [isPlaying, setIsPlaying] = useState(false);

7. Let's add a button

Sound Button

  • We'll set the onClick function to an anonymous function that's set the isPlaying state opposite to what the current state is.
  • Then for the text we'll add a ternary operator for if the state is false the text will display "Play", otherwise, it will display "Stop".

8. Set the playStatus of the <Sound /> component.

Sound Component

  • Set the playStatus to play only when isPlaying is set to true, otherwise, playStatus would be set to Sound.status.STOPPED.

And there you have it, you got a working sound component!

Completed Project

Top comments (12)

Collapse
 
matekomenda profile image
Komenda Máté

What is this VS Code theme, can u tell me ? :)

Collapse
 
daveguz97 profile image
David Guzman

I think I used outrun electric

Collapse
 
ajaychandraofficial profile image
Ajay Chandra

The theme name is Shades of Purple I think

Collapse
 
strk14_ profile image
Aman Shukla

Theme is more eye grasping 😍

Collapse
 
nivethan profile image
Nivethan Ariyaratnam • Edited

i like the way that props are showing in cursive, how to do that in vs code? is it a font? or a theme?

Collapse
 
daveguz97 profile image
David Guzman

Sorry for the late reply, haven't blogged in a while, it's a font called Fira Code Iscript.

Collapse
 
clefayomide profile image
clefayomide

Nice article. Would love to use it in my portfolio project. Is there a prop to pass in a default volume ?

Collapse
 
clefayomide profile image
clefayomide

i just went through the official doc and its packed with tons of useful props including the volume i was asking for. thanks for sharing!

Collapse
 
daveguz97 profile image
David Guzman

No problem, I don't think there's a prop for the default volume, but let me know!

Collapse
 
hagureantra profile image
Antra Hagure

Thank you for this article, it very helpful!

I have a question: how do you make a sound prop for button so each button you create could have a different sound effect?

I have been stuck on this for a while.

Collapse
 
jameshubert_com profile image
James Hubert

Awesome. Such a fun feature. Glad someone wrote about this.

Collapse
 
daveguz97 profile image
David Guzman

Thanks for the comment! Interesting feature and easy to implement!