You might not need a sound library for React

Photo by Brooke Cagle on Unsplash

Using audio and video files can sometimes be tricky. To a beginner, it may look like a lot of work but in reality, they are simple to work with.

My project idea was very simple and straightforward. I was trying to make a React app that has multiple audio files inside it. There are several buttons and when the user clicks on the button a certain audio is played.

My project stack was

• TypeScript
• React
• Tailwind

JavaScript takes care of the types but with TypeScript you gotta watch your step.

Till now I have only worked with images in React so I googled how to use audio files and two libraries shot up.

react-sound

use-sound

use-sound is a relatively new package compared to react-sound so I picked that up.

The work of libraries is to make the implementation simple and these perfectly do that. I implemented as it says in the docs.

import useSound from 'use-sound';

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {
  const [play] = useSound(boopSfx);

  return <button onClick={play}>Boop!</button>;
};

The implementation was straightforward and I started using it.

After some days when I was making an update to the sound component I was taking to one of my friends about using and storing sound files in React, and he told me to use HTML5 <audio> component. I was like “Will that work in React? 😲”.

Now one thing to note here is that React also uses HTML, and React is just an abstraction of the complex JavaScript functions that convert your JSX into HTML so almost all the HTML tags and stuff work by default in React.

I was skeptical about whether HTML <audio> tag will work on not but then I read about the Tag on MDN (best resource).

The <audio> tag takes in an srcand some attributes like controls, muted, etc. The <audio> tag does not have any such visual output, so if you hide the controls, nothing will be visible to you. This is perfect if you want to play audio when clicking on a custom button.

Coming to importing audio files. Many places including use-sound docs suggest to import audio files like

import boopSfx from '../../sounds/boop.mp3';

Well, this doesn’t work, at least not in my case with TypeScript. 🥲

This answer from StackOverflow worked for me https://stackoverflow.com/a/59456219/9715289

The solution is to use ES5 require()

const mySound = require("../assets/file_name.mp3");

This imports the file nicely. ✌️

Now the final task was to add a click event to the button to play audio when button was clicked.

For that my implementaion is simple. I used a onClickevent to trigger the playand pause function of the audio.

const AudioPlayer = () => {
  
  const audio = document.getElementById("audio_tag");
  const [play, setPlay] = useState(false);
  
  return(
     ...
      <button
        onClick={() => {
          play ? setPlay(false) : setPlay(true);
          play ? audio.pause() : audio.play();
        }}
      >
      ...
     </button>
     <audio id="audio_tag" src={mySound} />
  )
}

This sums up the implementation

TLDR;

This little incident made me realize that basic things like HTML and CSS are feature-packed and they are very well suitable for simple tasks. Like in my case I just wanted to play audio upon clicking so I don’t need to add an external library for that I can just use the built-in tools to achieve what I want.

This in no way means that external libraries are bad. They are excellent at providing you with a simple implementation and provide additional features. But first, we should also look at what the default tools are providing us.

Conclusion

In the current state of the web new libraries are coming up everyday and it is tempting to put them into our projects but first we should try to assess whether that libarary actually provides some value or that work can be done using the built-in tools only.

That’s it
ENJOY and <CODE/>

About me:
I am Shubh Agrawal, a Frontend Developer and I love to code, write, read and click pictures. 😁
https://www.theshubhagrwl.in/