Similar to the Play / Pause button, we are going to introduce the Mute / Unmute button so that our users have more control over the music playback functionality. Let's get started:
- Download the following icons from the Material Design Icons website:
- volume_mute (https://material.io/tools/icons/?icon=volume_mute&style=baseline)
- volume_off (https://material.io/tools/icons/?icon=volume_off&style=baseline)
- You can enable the mute functionality for any HTML element using the following code:
<span class="amplitude-mute"></span>
- When you click on the element and the player becomes muted, the span gets a secondary class, that is, amplitude-muted.
You can also address amplitude-not-muted if you want some extra styling. Follow these steps to add the buttons:
- Update the index.html file so that it looks as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Music Player</title>
<link rel="stylesheet" href="player.css" />
</head>
<body>
<h1>Music Player</h1>
<div class="controls">
<div class="amplitude-play-pause"></div>
<div class="amplitude-stop"></div>
<div class="amplitude-mute"></div>
</div>
<script src="./node_modules/amplitudejs/dist/amplitude.js">
</script>
<script src="./player.js"></script>
</body>
</html>
- Due to all the base classes we defined earlier, we only need to add the following content to the player.css file:
.controls .amplitude-mute {
background: url('./images/baseline-volume_mute-24px.svg');
background-size: cover;
}
.controls .amplitude-mute.amplitude-muted {
background: url('./images/baseline-volume_off-24px.svg');
background-size: cover;
}
- Refresh the window or restart the application to see the changes in action. Your player should now display three buttons, including the Mute one we just created, as shown in the following screenshot:
- Click the Play button to start the playback and then click the Mute button. Notice that you don't hear any sound. The button updates its style to show the muted icon:
Now, it's time to move on to the volume buttons. These buttons will allow our users to tune the output so that it's either louder or quieter.