Logo
Cover image

Custom React Hooks: useAudio

Posted on 1/11/2022

reactjavascriptprogramming

In the last episode of the Custom React Hooks series, we’ve discovered the useNetworkState hook to simplify the user’s network state management. Today, we’ll explore another useful custom hook: useAudio. Ready? Let’s go. 😎

Motivation

Why would you ever need such a hook? Well, I’ll give you two examples. The first one is my personal website, iamludal.fr (I swear this is not self-promotion 🙄), built with React, which top navigation bar contains a button to switch between light and dark theme. Actually, if you turn up the sound a little, you might hear a switch sound. This sound comes from this custom hook. The second example is the Typospeed game, where you can hear sounds when removing a word (actually, Typospeed was built with Svelte, but you get the idea). In both examples, we need to play some sounds, and we don’t want to repeat ourselves by manually instantiating a new audio, settings its volume, its playback rate...

1const Home = () => {
2  const audio = useRef(new Audio('/switch.mp3'))
3
4  useEffect(() => {
5    audio.current.playbackRate = 1.5
6    audio.current.volume = 0.8
7  }, [])
8
9  return (
10    <button onClick={audio.current.play}>Play Sound</button>
11  )
12}

We don’t want to write all this code every time we need to use audio sounds. Also, we have to use the useRef hook in this situation and keep track of its current value in order to not recreate the audio instance at each component re-render.

That being said, we now have a sufficient reason to implement our new custom hook. Let’s get our hands dirty! 👨🏻‍💻

Implementation

As we said in the previous part, we don’t want to repeat ourselves (and this is the major goal of custom hooks). Therefore, our function will take optional parameters for our audio instance (which can be either static or dynamic), corresponding to additional options.

1const audio = useAudio('/switch.mp3', { volume: 0.8 })

Also, we don’t want to bother with the current property: we have to extract this logic inside the new hook. This way, we will be able to interact with the audio instance directly.

1audio.play()
2audio.pause()

Hence, the skeleton will look like this:

1const useAudio = (src) => {
2  const audio = useRef(new Audio(src))
3
4  return audio.current
5}

This is the first and basic version of the hook. If you don’t need to have additional options, you’re ready to go. But we will add another parameter to this hook: an options object. Each time a given property of that object changes, we have to update our instance. This way, the options can be updated dynamically from outside — with another hook, such as useState.

The final hook implementation now looks like this:

1const useAudio = (src, { volume = 1, playbackRate = 1 }) => {
2  const audio = useRef(new Audio(src))
3
4  useEffect(() => {
5    audio.current.volume = volume
6  }, [volume])
7
8  useEffect(() => {
9    audio.current.playbackRate = playbackRate
10  }, [playbackRate])
11
12  return audio.current
13}

If you need any other options, feel free to add them depending on your needs. For instance, you could add an array parameter for the play method in order to only play a specific part of the audio (particularly useful when you have one audio file with multiple sounds, which is a technique used by some games).

Our hook is now ready to use. 🤘

Usage

Back to our first example, the code can now be simplified as follows:

1const Home = () => {
2  const audio = useAudio('/switch.mp3', { volume: 0.8, playbackRate: 1.5 })
3
4  return (
5    <button onClick={audio.play}>Play Sound</button>
6  )
7}

We’ve abstracted out all the logic inside this new hook, which leads to a simpler, cleaner and more readable code.

Wrapping Up

With this brand-new hook, we've reduced the amount of code needed in our components to play audio files. Also, we don't have to manually change the volume or playback rate when we need to: the hook takes care of this for us, as long as we provide it a dynamic value (generally obtained from useState). Also, all this logic is now available everywhere in our application without increasing the complexity. In the next (and last) episode, we will implement my favorite hook: useInView.

Copyright © 2022 Ludovic CHOMBEAU