To turn an HTML element into a Play button, you need to use the amplitude-play CSS class like so:
<span class="amplitude-play"></span>
As you can see, adding the amplitude-play class turns an element into a clickable object that starts music playback. Let's use this class with a button element in our application:
- Declare the button element in the index.html file as follows:
<!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>
</div>
<script src="./node_modules/amplitudejs/dist/amplitude.js"></script>
<script src="./player.js"></script>
</body>
</html>
- Try out the application by running the following command from the Terminal window or Command Prompt:
npm start
- As you can see, at startup, you now have a Play button under the dummy Music Player heading:
Now, if you click the Play button, you should hear the music playing.
We don't have any other music control buttons, so the only way to stop the player is to quit the application. Don't worry; we are going to address this shortly. Next, we are going to create a Pause button so that we can stop the music.