In the previous section, we prepared a folder structure and obtained some files to use within our application. Now, let's learn how to initialize a music player component and play the sound files we have.

At this point, your project structure should look similar to the following:

Switch to the player.js file and configure a new instance of the player component by calling the Amplitude.init method with an object of configuration settings, as shown in the following code:

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'
    }
  ]
});

In the preceding example, we are using the following properties:

• songs: A list of songs to play. For now, we are using a single entry.
• name: The song's name.
• artist: The song's artist or band.
• album: Name of the album.
• url: The link to the music content. Here, we are using a local path, but you can point it to the remote web address if you wish.
• cover_art_url: The link to the album cover image. Similar to the url property, it can point to either a local or remote location.

Note that these are the basic metadata properties we are going to use when building the music player application. You can, however, store much more metadata content and use it on demand. We are going to address this later in this chapter.

In this section, we are going to address the following aspects:

• Using AmplitudeJS elements
• Implementing the global play button
• Implementing the global pause button
• Implementing the global play/pause button

Now, let's look at the elements that are available in AmplitudeJS and how we can use them.