Metadata is a piece of additional information about the song you play. Metadata can contain the name of the album, the year of its release, rating, and many other blocks of useful information.
In this section, we are going to display the following metadata when playing a music file:
- Elapsed time
- Remaining time
- Cover image
- Song name
- Artist name
Before we start, let's learn how to deal with the song metadata. You can extract the values as follows:
<span data-amplitude-song-info="<PROPERTY>"></span>
<PROPERTY> corresponds to one of the metadata properties for the song object that we defined earlier in the player.js file:
Amplitude.init({
songs: [
{
name: 'Equilibrium I (Cello version)',
artist: 'David Hilowitz',
album: 'Equilibrium I (Cello version)',
url: './music/David_Hilowitz_-_Equilibrium_I_Cello_version.mp3',
cover_art_url:
'./music/David_Hilowitz_-_Equilibrium_I_Cello_version_-
_20190327141456457.jpg'
}
]
});
This means you can use the following class to display the name field in the metadata:
<span data-amplitude-song-info="name"></span>
Besides custom fields, Amplitude provides you with a set of time-related elements.
To display the elapsed time, we are going to use the following CSS class:
<span class="amplitude-current-minutes"></span>
This gives us a value in minutes. However, for better precision, you may also want to use seconds:
<span class="amplitude-current-seconds"></span>
Similar to the elapsed time, you can render the duration of the entire song in minutes:
<span class="amplitude-duration-minutes"></span>
Again, we also need to show seconds using the following format:
<span class="amplitude-duration-seconds"></span>
Let's combine all of these elements and display the timing values. Follow these steps to do so:
- Update the body element of your index.html page and append the following block of code to it:
<div>
<span class="amplitude-current-minutes"></span>:
<span class="amplitude-current-seconds"></span>
<span class="amplitude-duration-minutes"></span>:
<span class="amplitude-duration-seconds"></span>
</div>
- Restart the application, start the playback, and check out the timer values. As you can see, we have played 00:11 of the song, which has a total length of 01:55:
- Next, we need to show the cover art for the album. Amplitude allows you to render the metadata value as the source of the image element. All you need to do is declare the data- attribute, as shown in the following code:
<img data-amplitude-song-info="cover_art_url" />
- As you may recall, we downloaded the cover art picture and declared it in the song configuration file player.js. Now, you should see the image at runtime:
- Finally, let's put the album's name at the top of the cover image:
<div>
<span data-amplitude-song-info="album"></span>
</div>
- The final HTML markup should look 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>
<span data-amplitude-song-info="album"></span>
</div>
<img data-amplitude-song-info="cover_art_url" />
<div>
<span data-amplitude-song-info="name"></span>
by
<span data-amplitude-song-info="artist"></span>
</div>
<div class="controls">
<div class="amplitude-play-pause"></div>
<div class="amplitude-stop"></div>
<div class="amplitude-mute"></div>
<input type="range" class="amplitude-volume-slider" />
</div>
<div>
<progress class="amplitude-song-played-progress"></progress>
</div>
<div>
<span class="amplitude-current-minutes"></span>:<span
class="amplitude-current-seconds"
></span>
<span class="amplitude-duration-minutes"></span>:<span
class="amplitude-duration-seconds"
></span>
</div>
<script src="./node_modules/amplitudejs/dist/amplitude.js">
</script>
<script src="./player.js"></script>
</body>
</html>
- Our minimalistic music player application now appears as follows:
We have made brilliant progress, and as you can imagine, there are many more features we can add to the application at this point. However, let's not forget about the user interface and polish our application a bit.