Integrating React Use-sound Hook for Multiple Audio Files (Play/Stop)

What is Use-Sound?

Trying to create the next Spotify or simply adding some flair to your personal website or portfolio? Use-sound is a React hook developed by Joshua Comeau that allows React developers to integrate playable MP3 files for your React application. For full documentation on Use-sound and it’s utilizing, please visit Joshua’s blog here.

Step 0- Setup

For the purposes of this demonstration, I will be utilizing the play/stop features of Use-sound with four audio files of my choosing. You will need the following:

1. Mp3 Files of your choosing.
2. Album art or cover photo (optional).
3. Play/pause icons for toggling states (also optional).
4. Use-sound and use-State hooks.

The package can be added using npm or yarn:

yarn add use-sound
npm i use-sound

I’ve also incorporated the Font Awesome React libraries for the play/pause buttons.

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

Finally, I’ve created a basic React application utilizing:

npx create-react-app my-music-app

Step 1- Importing Libraries and Hooks Setup

We will begin by importing the necessary React libraries and the Use-sound hooks:

import React, {useState} from 'react';
import useSound from 'use-sound';

Import the play/pause buttons and music covers:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faPlayCircle, faPauseCircle} from '@fortawesome/free-solid-svg-icons';
import RihannonImg from '../images/Rhiannon.jpg'
import Barracuda from '../images/Barracuda.png'
import Saada from '../images/saada.jpg';
import Broadcast from '../images/Broadcast.jpg';

Finally, we will need to import the audio files (Use-sound works with MP3 audio files):

import RihannonAudio from '../audio/Rihannon.mp3';
import BarracudaAudio from '../audio/Barra.mp3';
import SaadaAudio from '../audio/Saada.mp3';
import BroadcastAudio from '../audio/Broadcast.mp3';

To create a toggle effect for the play/pause icons and to denote which of the audio files is currently playing, we need to add a use-state function for each of the songs we have chosen:

const [playingR, setPlayingR] = useState(false);
const [playingB, setPlayingB] = useState(false);
const [playingS, setPlayingS] = useState(false);
const [playingBr, setPlayingBr] = useState(false);

Step 2- Creating Music Container

I’ve created a music container utilizing CSS Grid layout that includes each of the songs and a conditional operator that toggles the play/pause icons based on the states defined above for each song:

Incorporated into the return function of a React component

After adding some basic CSS styling my UI currently looks like this:

Step 3- Creating a Toggle Effect and Adding Use-sound

Next, we will add an onClick event listener to each of our “song” divs to toggle the play/pause button (This will also be utilized to play/pause the audio once we incorporate use-sound).

The result should look like this:

Now that our UI is set up, it’s time to get into the exciting stuff! Let’s incorporate the Use-sound hook. In order to utilize the Hook with multiple audio files, we are going to React one last state hook for the current song:

const [song, setSong] = useState('');

We will pass the song state constant into our use-sound hook:

const [play, {stop}] = useSound(song);

Here we have defined the play and stop features of UseSound. You can read more about all the features of use-sound here.

Step 4- Attaching Playable Audio Files to Song

Now that we have defined our song state constant and our use-sound hook, it’s time to incorporate them into the song div.

We will begin by utilizing the onMouseDown event listener to set the current playing song as it will fire before this onClick even listener. This can also be done with an async function.

Setting the current song to the corresponding song using onMouseDown.

Now that we have set the song, the last step is to evoke the play and stop functions of the use-sound component. Let’s do this by adding a conditional operator in our onClick function.

Tada! We’ve done it. Our audio files are now playable and toggleable. We can add as many audio files as our heart (and CPU memory) desires.

Summary

The Use-sound hook is a powerful audio playing feature that can allow developers to integrate their favorite soundtracks into their React projects. This is simply one way in which you can integrate the library’s features to multiple audio files. Thank you for reading, I hope this was helpful! You can check out the full Use-sound hook library here for further instructions and other implementations.