Similar to the global Play button, you can define an element to handle the Pause functionality as well. You should use the amplitude-pause CSS class for this. The usage format, according to the official documentation, is as follows:
<span class="amplitude-pause"></span>
You can turn any clickable element or complex web component into a Pause button. For the sake of simplicity, let's use the standard HTML button element. Update the index.html file according to the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Music Player</title>
</head>
<body>
<h1>Music Player</h1>
<div>
<button class="amplitude-play">Play</button>
<button class="amplitude-pause">Pause</button>
</div>
<script src="./node_modules/amplitudejs/dist/amplitude.js"></script>
<script src="./player.js"></script>
</body>
</html>
Now, you should have two buttons rendered next to one another:
This time, you can pause music playback with the Pause button and resume or play the file with the Play button. All you did here was set the CSS class for the HTML button element.
Let's move on and slightly rework our buttons to improve our user experience.