Reviewing the final structure

Now, we have a nice-looking music player application based on Electron and the Amplitude library. In this section, we are going to review the final state of the code and verify that we have done everything correctly.

Please refer to the following index.html file in case your application's layout looks different or you think you may have missed a certain step:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Music Player</title>
    <link rel="stylesheet" href="player.css" />
  </head>
  <body>
    <img class="cover-image" data-amplitude-song-info="cover_art_url" />

    <div class="song-progress-container">
      <div>
        <span class="amplitude-current-minutes"></span>:<span
          class="amplitude-current-seconds"
        ></span>
      </div>

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

      <div>
        <span class="amplitude-duration-minutes"></span>:<span
          class="amplitude-duration-seconds"
        ></span>
      </div>
    </div>

    <div class="song-info-container">
      <div data-amplitude-song-info="name"></div>
      <div data-amplitude-song-info="album"></div>
      <div data-amplitude-song-info="artist"></div>
    </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>

    <script src="./node_modules/amplitudejs/dist/amplitude.js"></script>
    <script src="./player.js"></script>
  </body>
</html>

The full CSS class implementation in the player.css file should look similar to the following:

.cover-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: 300px;
}

div.song-progress-container {
 display: grid;
 grid-template-columns: 1fr 10fr 1fr;
 grid-gap: 10px;
}

progress.amplitude-song-played-progress {
  width: 100%;
}

.song-info-container {
  text-align: center;
}

.controls > div {
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: inline-block;
}

.controls .amplitude-play-pause {
  width: 74px;
  height: 74px;
  cursor: pointer;
  display: inline-block;
}

.controls .amplitude-play-pause.amplitude-paused {
  background: url('./images/baseline-play_circle_filled-24px.svg');
  background-size: cover;
}

.controls .amplitude-play-pause.amplitude-playing {
  background: url('./images/baseline-pause_circle_filled-24px.svg');
  background-size: cover;
}

.controls .amplitude-stop {
  background: url('./images/baseline-stop-24px.svg');
  background-size: cover;
}

.controls .amplitude-mute {
  background: url('./images/baseline-volume_mute-24px.svg');
  background-size: cover;
}

.controls .amplitude-mute.amplitude-muted {
  background: url('./images/baseline-volume_off-24px.svg');
  background-size: cover;
}

.controls .amplitude-volume-up {
  background: url('./images/baseline-volume_up-24px.svg');
  background-size: cover;
}

.controls .amplitude-volume-down {
  background: url('./images/baseline-volume_down-24px.svg');
  background-size: cover;
}

As you can see, we didn't need to use too much code to make the player work. It's mainly just a few HTML elements and a set of CSS styles so that we can wire them with Amplitude or make them look better.

The application may need more work to be done to it so that it's truly useful as a player. Please feel free to provide support so that you can switch between different songs, support playlists, fetch album covers from online sources, and much more.

Table of Contents for Reviewing the final structure

Create new playlist

Sign In

Sign Up

Table of Contents for
Reviewing the final structure