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. Album art or cover photo (optional).
  2. Play/pause icons for toggling states (also optional).
  3. Use-sound and use-State hooks.
yarn add use-sound
npm i use-sound
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
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 { 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';
import RihannonAudio from '../audio/Rihannon.mp3';
import BarracudaAudio from '../audio/Barra.mp3';
import SaadaAudio from '../audio/Saada.mp3';
import BroadcastAudio from '../audio/Broadcast.mp3';
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

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).

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

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.

Setting the current song to the corresponding song using onMouseDown.

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.

Software Engineer focused on Full Stack development with MERN stack and Ruby experience. Interested in sharing my learning journey with aspiring developers.