Last time, I received an interesting and fancy project task: creating an audio player for a webpage to play bank podcasts. I have always been curious about how complicated it is to create an audio player in the JavaScript/React ecosystem.
In this series of articles, I will document my journey of building an audio player with React from scratch. The focus will be on the functionality of the audio player, rather than its styling.
Just to give you an idea how my audio player looks like, here is the result 🎶:
Do we need a library ?
The first question that came to mind was whether I would need a special library to work with the audio or to display the time in the progress bar.
After checking the Embed Audio element, I realized that it provides an extensive API with all the necessary events, such as
- play (play),
- pause (pause) video,
- check if video can be play (canplay),
- time update (timeupdate) and many others.
If you want to check the embed audio element with attributes and events check here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
So in my opinion answer is NO, we don’t need library.
Create useAudio hook — core of the audio player
Let’s start with creating custom hook which will be engine of our application and allows us to control native audio.
In the very first step we will send the audio path to our useAudio hook and the hook will create a new native HTMLAudioElement and save it to the ref with useRef. Then we add addEventListener for canplay event and save the information if the audio can be play in isReady state.
Hook is called from the main app file:
🎉 After running the code we should see two console logs:
Let’s play audio
So our audio is ready. Now is the time to play/pause audio. First, let’s add a state property for playing.
In useEffect for handling listeners, we add play and pause and specific set methods.
In the body of the useAudio hook, we add play and pause methods, which control playing of our audio.
We add isPlaying property and the play and pause methods in the return statement of our hook.
Finally, we need to add a button in our main app file to enable play/pause in our audio based on the isPlaying property.
Here is the final version of the App with button for the first chapter:
Here is the final version of the useAudio hook for the first chapter:
🎉 After running the code, we should see a button, and after clicking on play, we should hear some sound.🎵.
Runnable version can be found in the link below:
https://codesandbox.io/p/devbox/audio-player-first-chapter-2d6f7r
Conclusion
In the first chapter we created custom hook useAudio, which allows us play/pause audio and returns state properties indicating if audio is playing and ready to play.
In the next chapters we will extend this hook with new features like showing progress, setting volume and others.
Create audio player in React without a library was originally published in ableneo tech & transformation on Medium, where people are continuing the conversation by highlighting and responding to this story.