Benefits

The first time when I wanted to use audio on this site and saw that I would have to build my own audio player it was pretty daunting. All I wanted was to be able to play some audio and not have it look like something from the 90’s. But, I soon found out that building a simple react audio player was quite simple.

A benefit of this solution is that it only uses React built-ins. This way, it is about as lightweight as the default <audio> element and it is simple to set up, and easy to maintain; perfect if you want to have a simple but customizable way to play audio on your site!

Demo

Below is a functional demo of the solution implemented in CodeSandbox. By clicking the hamburger menu in the top-left you can find the demo structure. In ./src/components/audioplayer you find the source code of the React component. Two parts team up to make a smooth play/pause toggle: Audio (audio.tsx) handles the functionality of what to do when clicked, and StyledAudio (audio.style.tsx) sets the looks of the button correspondingly. Let me walk you through them.

Function

The Audio object uses a useState to keep track of whether the audio is playing or not. It’s like a switch that can be on (playing) or off (paused).

Within the Audio object, you will also find the use of an audioRef. It lets us control the audio object directly. If you want to see that there is an <audio> object being manipulated in the background, just add the control argument to <Audio src={sourceUrl} control/>. This will display the default user controls of the HTML audio player that runs. If you now toggle our play/pause button, you will see that both our created button, and the HTML audio player are being toggled.

The method that uses this audioRef object is the togglePlayPause function. It checks if the audio is playing or not. If the function is called while the audio is playing, it pauses it. If it’s paused, it kicks off the play, all using the audioRef.

Additionally, when returning our audio component, we add a class name playing depending on the play state. We can use this class name for the styling of our component.

Styling

Then there is the cosmetics, handled by StyledAudio, a styled <div> component. Most importantly, it checks for the presence of a playing class name. It then hides the SVG with the play-button ID and shows the SVG button with the pause-button ID. Additionally, it sets their size, and when the cursor hovers over the object sets the cursor to a pointer and adds a color change effect.

So, when you click on the audio player, in the Audio object, the togglePlayPause toggles the play of the audio. Meanwhile, StyledAudio checks for the playing class name and makes sure the button with the correct CSS ID is visible, giving you a simple and smooth play/pause toggle experience in our React app.