So far, our users can start the playback and pause it. However, there is no way for us to stop and reset the song's progress so that we can listen to the same song from the beginning, for example. Let's look at how we can add the Stop button:
- Create the new Stop button using the following Amplitude CSS class:
<span class="amplitude-stop"></span>
- Download the stop icon from Material Design Icons (https://material.io/tools/icons/?icon=stop&style=baseline) and place it into the images folder, as we did earlier.
- After that, update the index.html file and append the button element with the corresponding class to the controls element, which we are using to hold all the playback controls:
<!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>
<script src="./node_modules/amplitudejs/dist/amplitude.js"></script>
<script src="./player.js"></script>
</body>
</html>
- Finally, we need to get back to the player.css file and provide a new style for the .amplitude-stop class so that we can render our button.
- Append the following code to your stylesheet:
.controls .amplitude-stop {
width: 48px;
height: 48px;
cursor: pointer;
display: inline-block;
background: url('./images/baseline-stop-24px.svg');
background-size: cover;
}
- You can restart the application or press Cmd + R (Ctrl + R) to reload the window. We now have two buttons available, as shown in the following screenshot:
Note that when you click the Stop button, the Play / Pause functionality is also updated.
Given that we are going to add more buttons, let's optimize the CSS to avoid code repetition:
- Create a separate style addressing all the child div elements inside the .controls parent.
- Add the following code to the bottom of our player.css file:
.controls > div {
width: 48px;
height: 48px;
cursor: pointer;
display: inline-block;
}
- Now, refactor the player.css file so that it looks as follows:
.controls > div {
width: 48px;
height: 48px;
cursor: pointer;
display: inline-block;
}
.controls .amplitude-play-pause {
width: 74px;
height: 74px;
cursor: pointer;
display: inline-block;
}
As you can see, all our buttons are going to be 48x48 pixels in size, except for the Play / Pause button, which we make intentionally bigger. All the buttons have the same cursor and display settings.
Now it's time to move on and introduce the mute and unmute buttons.