Creating a Toggle Button for Muting and Unmuting an Audio Element in React

Lindsey Kopacz
InstructorLindsey Kopacz
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated a year ago

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 onVolumeChange for instead of onMuted?
  • How can we use onVolumeChange to 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.

egghead
egghead
~ 34 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today