Creating a Toggle Button for Muting and Unmuting an Audio Element in React
We are creating a toggle button for muting and unmuting an audio element using React hooks useState and useRef. It destructures isMuted from the useState hook and sets the initial state to false.
The button's inner text is dependent on the state of isMuted, and a toggleMute function is created which sets isMuted to the opposite of its current state and also sets the audioRef.current.muted property to the opposite of isMuted.
A onVolumeChange function is added to the audio element that sets the isMuted state based on the value of audioRef.current.muted. This allows the isMuted state to change even when the mute button on the audio element itself is pressed.
Think about:
- Why do we have to add
onVolumeChangefor instead ofonMuted? - How can we use
onVolumeChangeto check for things being muted?
[0:00] Now let's create some mute states. So we are going to destructure isMuted and set isMuted, and let's use the useState hook and set the initial state to . Now let's go down to the JSX and underneath the rates, let's create a button. [0:19] Inside that button, let's render a ternary. So if it is muted, we're going to render the text unmute. Else mute. Next let's create a toggleMute function. const toggleMute equals, and let's do an arrow function here, we're going to set isMuted to the opposite of isMuted. And then we are going to do audioRef.current.
[0:46] muted equals the opposite of isMuted. Now let's add the onClick handler onto the button. So onClick equals toggleMuted. So if I press play, when I press mute, it mutes. And when I press unmute, it goes back. One thing to note though is when we control it with the audio element itself, that state doesn't change. So we want to make sure that that changes. So we're back here on the MediaElement API, and we go to events there's nothing about muted, but there is a volume change event. So we're going to use that on the audio element itself. So first let's create that function. const onVolumeChange equals, and we'll create an arrow function here. So first we'll check if audioRef.current.muted, we'll set isMuted to 1. Else if isMuted, set isMuted to . Next let's add that to the audio element. So on the audio element, we can type on volume change and then pass in that function. Now when we press play, and then we press the mute button on the audio element itself, we see that state changes. So to summarize, we created an isMuted state, then we created a button whose inner text is dependent on that state. If it is muted, we render the string unmute, otherwise we render the string mute. Then we created a toggleMuted function, and inside we set isMuted to the opposite of the isMuted state, and did the same thing for audioRef.current.muted. Then we were sure to add that to the onClick for that button. Next we created an onVolume change, and if the audioRef.currentMuted was 1, we set isMuted to 1. Else is muted, then we set isMuted to . Then on the audio element, we added onVolumeChange and set it to that function we just created.