One of the traditional music components in any user interface is the progress element. The progress bar component usually displays the current position of the song that we're listening to. In this section, we are going to provide support for the HTML progress element and wire it with the Amplitude library.

In this case, you should be using the progress HTML element. It should be in the following format:

<progress class="amplitude-song-played-progress"></progress>

Let's create a separate div to hold our progress element. For the sake of simplicity, let's leave the style of the element as it is. You can always make it more beautiful later. Follow these steps to do so:

1. Update the index.html file according to the following code:

<div class="controls">
  <div class="amplitude-play-pause"></div>
  <div class="amplitude-stop"></div>
  <div class="amplitude-mute"></div>
  <!-- <div class="amplitude-volume-down"></div> -->
  <!-- <div class="amplitude-volume-up"></div> -->
  <input type="range" class="amplitude-volume-slider" />
</div>

<div>
  <progress class="amplitude-song-played-progress"></progress>
</div>

2. Once again, restart the application or use Cmd/Ctrl + R to reload the main window.
3. Start the playback and pay attention to the progress element; it changes its value while the song plays:

We are making excellent progress. Now that we know how to add a song progress bar, it's time to render metadata for our music.