Server Side Up Logo
Open mobile menu

Customize HTML Audio via CSS — Introducing: AmplitudeJS

Dan Pastori avatar
Dan Pastori April 4th, 2014
#AmplitudeJS
Build better software and get user feedback directly in GitHub, GitLab, and more.

Due to the amount of questions and feedback from http://serversideup.net/style-the-html-5-audio-element/, I’ve decided to create an easy to use library that wraps the existing functions of the HTML 5 audio tag and allows for easy styling. You can customize HTML Audio CSS and the library allows use to easily brand and define the UX of their audio on their website.

Update 5-25-2017
We’ve made it even easier for you to style HTML5 audio elements. Amplitude 3 is now available! Download it on GitHub. Check out the Amplitude site for latest documentation and a to see the latest features:

GetAmplitude-1

The basic functions include:

  • Play
  • Play/Pause
  • Stop
  • Volume Slider
  • Track Slider

I’ve also added a few functions, such as:

  • Playlist Functionality
  • Shuffling of the Playlist
  • Callbacks on certain events such as play, pause, etc.
  • Playlist navigation (previous, next)
  • Easy integration of music meta data into other elements.

This article is the basic introduction on how to use Amplitude JS. It will walk you through building a simple single song player, up to a playlist player.

Adding Amplitude.js to Your Project

Amplitude.js is library/platform independent. All you have to do is include:

<script type="text/javascript" src="/path/to/amplitude.js"></script>

You should be good to go! Amplitude will bind itself to the appropriate elements as explained in the overview and tutorials.

Amplitude.js Overview

The concept of how Amplitude.js works is simple. You have an element on your page (div, span, etc), that you want to perform a function on the HTML 5 audio tag containing your music. By default the HTML 5 audio tag is pretty bland and generic. Amplitude allows you to hook into those functions by binding an event of that tag to an element. For example you have an audio tag and you want to play that tag. You would add an element with the id of “amplitude-play”. On load Amplitude.js will get that element and play the song. If you were using Amplitude.js in a playlist scenario, it would play the first song in the playlist.

Tutorials Introduction

The best way to see how Amplitude.js works is to start building the example player on the homepage of amplitudejs.com. We will start small, with a single song and no album art, and build up to a player that contains a playlist, song metadata, and album art.

Building a Single Song Audio Player

Use Case: A simple widget that allows for 100% customizability and branding that plays a song of choice.

Functions Needed:

  • Play/Pause
  • Track Meter
  • Time Tracker
  • Now Playing Information

Step 1: Include Amplitude JS

In the <head> of your document, include:

<script type="text/javascript" src="/path/to/amplitude.js"></script>

You are ready to start including functions!

Step 2: Add Your Music Source

*Note Amplitude.js doesn’t act differently based off of the audio file type. It just acts on the audio element.

It is important to add an id to your song because this is how the song will be referenced.

<audio id="single-song" amplitude-artist="Amplitude Artist" amplitude-title="Amplitude Title" amplitude-album-art-url="path/to/album-art.jpg" amplitude-album="Ampltude Album" amplitude-audio-type="song">
  <source src="songs/name%20of%20song%20filepath.mp3" type="audio/mp3"/>
</audio>

As you can see we not only added an <audio> tag, we also added some attributes. Amplitude.js uses these attributes to display the information about the song in places defined on your page. Amplitude will load these attributes into a JSON object that can be accessed at any time. The data in the object will also change upon song changes so you can hook into certain events and display the data wherever.

Attribute: amplitude-artist

This attribute should contain the information referring to the artist of the song.

Attribute: amplitude-title

This attribute should contain the information referring to the title of the song.

Attribute: amplitude-album

This attribute should contain the information referring to the album name of the song.

Attribute: amplitude-album-art-url

This attribute should contain the url to the album artwork.

Notice that the source contains a URL encoded src attribute. This is important otherwise the audio tag won’t be able to find the song source. “%20” encodes as a space.

Step 3: Add a Play/Pause button

<div id="amplitude-play-pause" class="amplitude-paused"></div>

That element will bind the play pause functionality to the song. Notice the class “amplitude-paused” that helps determine the state for your css.

There are two classes for this button:

  1. amplitude-paused
  2. amplitude-playing

If the song is currently playing, the class of amplitude-paused will be removed and the class amplitude-playing will be added. This allow for styling based off of the state of the player.

NOTE: As a recommendation, if you are using an image in your player (like for play button), I would recommend setting it as the background image to the actual amplitude element. This way the click handlers don’t miss to fire if it clicks on the <img> tag within a <div> tag.

NOTE: Any element that is not prefixed with “amplitude-” is not detected by Amplitude.js and is only there for structural reasons.

Right now the entire HTML code should look something like:

<!DOCTYPE html>
<html>
    <head>
        <title>Single Song Tutorial</title>
        <script type="text/javascript" src="../amplitude.js"></script>
        <link rel="stylesheet" type="text/css" href="single-song-styles.css"/>
    </head>

    <div id="player">
        <div id="player-top">
            <div id="amplitude-play-pause" class="amplitude-paused"></div>

        </div>
    </div>
    <audio id="single-song" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type=“song”>
        <source src="songs/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
    </audio>
</html>

For CSS we have:

#amplitude-play-pause{
    width: 58px;
    height: 59px;
    cursor: pointer;
    float: left;
}
.amplitude-paused{
    background-image: url('../images/yellow-play.png');
    background-repeat: no-repeat;
}
.amplitude-playing{
    background-image: url('../images/yellow-pause.png');
    background-repeat: no-repeat;
}

Step 4: Add track information

<span id="amplitude-now-playing-title">Song Name</span> <span id="slash">-</span><br><span id="amplitude-now-playing-artist">Artist</span>

The track information contains information regarding the now playing song. This information was set in the audio tag with the amplitude-* attributes. Amplitude.js will find the ids relating to “amplitude-now-playing-title” and “amplitude-now-playing-artist” and populate them with the appropriate information.

We should now have HTML that looks like:

<!DOCTYPE html>
<html>
    <head>
        <title>Single Song Tutorial</title>
        <script type="text/javascript" src="../amplitude.js"></script>
        <link rel="stylesheet" type="text/css" href="single-song-styles.css"/>
    </head>

    <div id="player">
        <div id="player-top">
            <div id="amplitude-play-pause" class="amplitude-paused"></div>
<div id=“track-info-container”>
            <span id="amplitude-now-playing-title">Song Name</span> <span id="slash">-</span><br><span id="amplitude-now-playing-artist">Artist</span>
</div>
        </div>
    </div>
    <audio id="single-song" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type="song">
        <source src="songs/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
    </audio>
</html>

And CSS that looks like:

/* Player Styles */
#player{
    width: 334px;
    margin: auto;
    box-shadow: 1px 5px 5px #888888;
}
#player-top{
    padding: 10px;
    height: 55px;
    background-color: white;
}
#slash{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#track-info-container{
    float: left;
    font-size: 10px;
    width: 170px;
    overflow: hidden;
    margin-left: 10px;
}
/* Amplitude Element Styles */
#amplitude-play-pause{
    width: 58px;
    height: 59px;
    cursor: pointer;
    float: left;
}
.amplitude-paused{
    background-image: url('../images/yellow-play.png');
    background-repeat: no-repeat;
}
.amplitude-playing{
    background-image: url('../images/yellow-pause.png');
    background-repeat: no-repeat;
}
#amplitude-now-playing-artist{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
}
#amplitude-now-playing-title{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}

The player should begin to come together and look like:

Step 5: Adding the track time information

<span id="amplitude-current-time">0:00</span> / <span id="amplitude-audio-duration">0:00</span>

The track time updates the current time and updates the audio duration based on the now playing song. When the time updates on the song, the id “amplitude-current-time” updates.

Beta: For live streaming, there is no definite end to the song so it is just infinity. You might not want to display the amplitude-audio-duration if you are doing a live stream.

Your HTML should now look like:

<!DOCTYPE html>
<html>
    <head>
        <title>Single Song Tutorial</title>
        <script type="text/javascript" src="../amplitude.js"></script>
        <link rel="stylesheet" type="text/css" href="single-song-styles.css"/>
    </head>

    <div id="player">
        <div id="player-top">
            <div id="amplitude-play-pause" class="amplitude-paused"></div>
<div id="track-info-container">
            <span id="amplitude-now-playing-title">Song Name</span> <span id="slash">-</span><br><span id="amplitude-now-playing-artist">Artist</span>
</div>
            <div id="time-info-container">
                <span id="amplitude-current-time">0:00</span> / <span id="amplitude-audio-duration">0:00</span>
            </div>
        </div>
    </div>
    <audio id="single-song" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type="song">
        <source src="songs/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
    </audio>
</html>

And CSS looks like:

/* Player Styles */
#player{
    width: 334px;
    margin: auto;
    box-shadow: 1px 5px 5px #888888;
}
#player-top{
    padding: 10px;
    height: 55px;
    background-color: white;
}
#slash{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#track-info-container{
    float: left;
    font-size: 10px;
    width: 170px;
    overflow: hidden;
    margin-left: 10px;
}
#time-info-container{
    float: left;
    margin-top: 15px;
    font-size: 10px;
    line-height: 19px;
}
/* Amplitude Element Styles */
#amplitude-play-pause{
    width: 58px;
    height: 59px;
    cursor: pointer;
    float: left;
}
.amplitude-paused{
    background-image: url('../images/yellow-play.png');
    background-repeat: no-repeat;
}
.amplitude-playing{
    background-image: url('../images/yellow-pause.png');
    background-repeat: no-repeat;
}
#amplitude-now-playing-artist{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
}
#amplitude-now-playing-title{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#amplitude-current-time{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-audio-duration{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

Step 6: Add song tracking information

<div id="amplitude-song-slider"><div id="amplitude-track-progress"></div></div>

It is important to both add the amplitude-song-slider and amplitude-track-progress. While the song is playing amplitude figures out the percentage of how far along the song is and converts that to a width for the amplitude-track-progress that fills the amplitude-song-slider. You can style the the color of the amplitude-track-progress div so you can visually see how far along the song is. The amplitude-song-slider is also capable of dragging and clicking to set the current song location. If you wanted an element to be pushed along with the progress of the track (such as iTunes and RDIO do, they have that little circle that you can drag along), you can add a song slider like:

<div id="amplitude-song-slider"><div id="amplitude-track-progress"></div><div id="amplitude-track-status"></div></div>

The element-amplitude-track-status gets pushed along with the track progress and is draggable as well.

Your HTML should now look like:

<!DOCTYPE html>
<html>
    <head>
        <title>Single Song Tutorial</title>
        <script type="text/javascript" src="../amplitude.js"></script>
        <link rel="stylesheet" type="text/css" href="single-song-styles.css"/>
    </head>

    <div id="player">
        <div id="player-top">
            <div id="amplitude-play-pause" class="amplitude-paused"></div>
            <div id="track-info-container">
                <span id="amplitude-now-playing-title">Song Name</span> <span id="slash">-</span><br><span id="amplitude-now-playing-artist">Artist</span>
            </div>
            <div id="time-info-container">
                <span id="amplitude-current-time">0:00</span> / <span id="amplitude-audio-duration">0:00</span>
            </div>
            <div id="amplitude-song-slider"><div id="amplitude-track-progress"></div></div>
        </div>
    </div>
    <audio id="single-song" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type="song">
        <source src="songs/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
    </audio>
</html>

And your CSS should look like:

/* Player Styles */
#player{
    width: 334px;
    margin: auto;
    box-shadow: 1px 5px 5px #888888;
}
#player-top{
    padding: 10px;
    height: 55px;
    background-color: white;
}
#slash{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#track-info-container{
    float: left;
    font-size: 10px;
    width: 170px;
    overflow: hidden;
    margin-left: 10px;
}
#time-info-container{
    float: left;
    margin-top: 15px;
    font-size: 10px;
    line-height: 19px;
}

/* Amplitude Element Styles */
#amplitude-play-pause{
    width: 58px;
    height: 59px;
    cursor: pointer;
    float: left;
}
.amplitude-paused{
    background-image: url('../images/yellow-play.png');
    background-repeat: no-repeat;
}
.amplitude-playing{
    background-image: url('../images/yellow-pause.png');
    background-repeat: no-repeat;
}
#amplitude-now-playing-artist{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
}
#amplitude-now-playing-title{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#amplitude-current-time{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-audio-duration{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-song-slider{
    display: inline-block;
    height: 10px;
    border-radius: 5px;
    width: 220px;
    background-color: rgba(237,237,237,.8);
    margin-left: 10px;
    margin-top: 5px;
}
#amplitude-track-progress{
    background-color: #fad52c;
    height: 10px;
    border-radius: 5px;
    width: 0px;
}

You now have a very basic player! It plays a single song and displays the now playing information regarding the song. The next part of this tutorial will add on to what we have already built, except add the album art picture.

This is what your player should look like:

For the updated player examples since the original release of this post, see the AmplitudeJS examples here: https://521dimensions.com/open-source/amplitudejs/examples

REMEMBER, this tutorial defines styles solely for providing a functional player to explain how to build an Amplitude player, but get creative! You can style your Amplitude.js player with whatever you want!

Step 7: Adding the album art

To add album art is pretty simple since we already defined the album art url in the meta data of the song. See Step 1 of the first part of this tutorial.

<div id="amplitude-album-art"></div>

With Amplitude all you have to do is give your element an id of “amplitude-album-art” and it will adjust to the now playing song’s album-art url.

Your HTML should look like:

<!DOCTYPE html>
<html>
    <head>
        <title>Single Song Picture Tutorial</title>
        <script type="text/javascript" src="../amplitude.js"></script>
        <link rel="stylesheet" type="text/css" href="single-song-picture-styles.css"/>
    </head>

    <div id="player">
        <div id="player-art">
            <div id="amplitude-album-art"></div>
        </div>
        <div id="player-top">
            <div id="amplitude-play-pause" class="amplitude-paused"></div>
            <div id="track-info-container">
                <span id="amplitude-now-playing-title">Song Name</span> <span id="slash">-</span><br><span id="amplitude-now-playing-artist">Artist</span>
            </div>
            <div id="time-info-container">
                <span id="amplitude-current-time">0:00</span> / <span id="amplitude-audio-duration">0:00</span>
            </div>
            <div id="amplitude-song-slider"><div id="amplitude-track-progress"></div></div>
        </div>
    </div>
    <audio id="single-song" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type="song">
        <source src="songs/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
    </audio>
</html>

And your css like:

/* Player Styles */
#player{
    width: 334px;
    margin: auto;
    box-shadow: 1px 5px 5px #888888;
}
#player-top{
    padding: 10px;
    height: 55px;
    background-color: white;
}
#player-art{
    padding-left: 5px;
    padding-top: 5px;
    background-color: white;
}
#slash{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#track-info-container{
    float: left;
    font-size: 10px;
    width: 170px;
    overflow: hidden;
    margin-left: 10px;
}
#time-info-container{
    float: left;
    margin-top: 15px;
    font-size: 10px;
    line-height: 19px;
}

/* Amplitude Element Styles */
#amplitude-play-pause{
    width: 58px;
    height: 59px;
    cursor: pointer;
    float: left;
}
.amplitude-paused{
    background-image: url('../images/yellow-play.png');
    background-repeat: no-repeat;
}
.amplitude-playing{
    background-image: url('../images/yellow-pause.png');
    background-repeat: no-repeat;
}
#amplitude-now-playing-artist{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
}
#amplitude-now-playing-title{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#amplitude-current-time{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-audio-duration{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-song-slider{
    display: inline-block;
    height: 10px;
    border-radius: 5px;
    width: 220px;
    background-color: rgba(237,237,237,.8);
    margin-left: 10px;
    margin-top: 5px;
}
#amplitude-track-progress{
    background-color: #fad52c;
    height: 10px;
    border-radius: 5px;
    width: 0px;
}
#amplitude-album-art{
    width: 324px;
    height: 324px;
}
.amplitude-album-art-image{
    width: 324px;
    height: 324px;
}

Notice that there is an additional class “amplitude-album-art-image” that we didn’t explicitly add to the HTML. This is because the element amplitude-album-art is the container that the <img> gets added to. Amplitude.js will add that image tag with the link to the necessary image. It will add the class as well incase you want to add any specific styles to the image.

You now have album art on your player.

See the updated examples on the AmplitudeJS website: https://521dimensions.com/open-source/amplitudejs/examples

Adding a Playlist

This is where Amplitude.js begins to add features. As listed above, there are many different functions that Amplitude.js adds when you have a playlist. All of which can be styled by CSS and handled by the javascript provided.

In this tutorial we will be adding the following functions:

  • Next
  • Previous
  • Shuffle

We will also include 2 different albums. The artist Jake Jendusa, has an album named In Search Of and an EP titled In Search Of EP.

Step 8: Creating the Playlist Element

<div id="amplitude-playlist">
        <audio id="1" amplitude-artist="Jake Jendusa" amplitude-title="Song from the Styx" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg'; ?>" amplitude-visual-element-id="song-1">
            <source src="songs/In%20Search%20Of/01%20Song%20from%20the%20Styx.mp3" type="audio/mp3"/>
        </audio>
        <audio id="2" amplitude-artist="Jake Jendusa" amplitude-title="Man with the Keys" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg'; ?>" amplitude-visual-element-id="song-2" preload="none">
            <source src="songs/In%20Search%20Of/02%20Man%20with%20the%20Keys.mp3" type="audio/mp3"/>
        </audio>
        <audio id="3" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type="song" amplitude-visual-element-id="song-3" preload="none">
            <source src="songs/In%20Search%20Of%20EP/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
        </audio>
    </div>

This shouldn’t be displayed. The element “amplitude-playlist” simply contains a list of audio tags. Amplitude.js will recognize it’s presence on the page when loaded and realize that there is a playlist.

When the initial play/pause button is clicked, Amplitude.js will find the first song in the playlist and begin playing there. As we add next, previous, and shuffle functions, the order will follow the playlist order. So the first played will be id=1, the next button will go to id=2, the previous button will wrap and go to id=3.

There are also 2 more attributes we added to each song:

Attribute: amplitude-visual-element-id

What this does is when the current song is playing in the playlist, the element gets a class of ‘amplitude-now-playing’ allowing it to be styled differently to show it is the current song on the playlist. We will expand this further when we get to the actual display of the playlist.

Attribute: preload

This is a native HTML 5 audio tag attribute. This will make sure that the songs don’t load on page load. If you have a playlist, you want to at least set preload=”none” on the songs after the first song, otherwise your page will take forever to load.

Your new HTML should look like:

<!DOCTYPE html>
<html>
    <head>
        <title>Single Song Picture Tutorial</title>
        <script type="text/javascript" src="../amplitude.js"></script>
        <link rel="stylesheet" type="text/css" href="playlist-styles.css"/>
    </head>

    <div id="player">
        <div id="player-art">
            <div id="amplitude-album-art"></div>
        </div>
        <div id="player-top">
            <div id="amplitude-play-pause" class="amplitude-paused"></div>
            <div id="track-info-container">
                <span id="amplitude-now-playing-title">Song Name</span> <span id="slash">-</span><br><span id="amplitude-now-playing-artist">Artist</span>
            </div>
            <div id="time-info-container">
                <span id="amplitude-current-time">0:00</span> / <span id="amplitude-audio-duration">0:00</span>
            </div>
            <div id="amplitude-song-slider"><div id="amplitude-track-progress"></div></div>
        </div>
    </div>
    <div id="amplitude-playlist">
        <audio id="1" amplitude-artist="Jake Jendusa" amplitude-title="Song from the Styx" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg" amplitude-visual-element-id="song-1">
            <source src="songs/In%20Search%20Of/01%20Song%20from%20the%20Styx.mp3" type="audio/mp3"/>
        </audio>
        <audio id="2" amplitude-artist="Jake Jendusa" amplitude-title="Man with the Keys" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg" amplitude-visual-element-id="song-2" preload="none">
            <source src="songs/In%20Search%20Of/02%20Man%20with%20the%20Keys.mp3" type="audio/mp3"/>
        </audio>
        <audio id="3" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type="song" amplitude-visual-element-id="song-3" preload="none">
            <source src="songs/In%20Search%20Of%20EP/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
        </audio>
    </div>
</html>

Since we just added the playlist element, that doesn’t affect the look of the site, there are no CSS updates.

Step 9: Adding next, previous, shuffle, and toggle_playlist

<div id="player-bottom">
    <div class="control" onclick="toggle_playlist()">
        <img src="../images/yellow-playlist.png"/> List 
    </div>
    <div class="control" id="amplitude-previous">
        <img src="../images/yellow-previous.png"/> Prev
    </div>
    <div class="control" id="amplitude-next">
        Next <img src="../images/yellow-next.png"/>
    </div>
    <div class="control" id="amplitude-shuffle">
        Mix <img id="shuffle-on-image" src="../images/yellow-shuffle-on.png"/><img id="shuffle-off-image" src="../images/yellow-shuffle.png"/>
    </div>
</div>

This is the entire container for the new functions. As you can see the functions follow the typical amplitude naming convention.

Next Button id = “amplitude-next”
Previous Button id = “amplitude-previous”
Shuffle id = “amplitude-shuffle”

Shuffle will randomize all of the songs in the playlist div and randomize them in a temporary array. While Shuffle is active, there is a variable named ‘amplitude_shuffle’ that is set to either true or false. True is if shuffle is on, false if it is not. The shuffle function is based off of a C++ implementation found here: http://www.codinghorror.com/blog/2007/12/the-danger-of-naivete.html which references http://en.wikipedia.org/wiki/Knuth_shuffle

There is another function, toggle_playlist(). This is not defined with Amplitude.js and it’s purpose is to display the visual playlist once we get there. The Javascript for this is:

var open_playlist = false;
function toggle_playlist(){
    if(open_playlist){
        document.getElementById('player-playlist').style.display = 'none';
        open_playlist = false;
    }else{
        document.getElementById('player-playlist').style.display = 'block';
        open_playlist = true;
    }
}

We will be adding the visual portion of the playlist next. Right now if you were to test the implementation, the list button would throw an error when clicked because we haven’t added the visual playlist yet.

We should now have HTML that looks like:

<!DOCTYPE html>
<html>
    <head>
        <title>Single Song Picture Tutorial</title>
        <script type="text/javascript" src="../amplitude.js"></script>
        <link rel="stylesheet" type="text/css" href="playlist-styles.css"/>
    </head>

    <div id="player">
        <div id="player-art">
            <div id="amplitude-album-art"></div>
        </div>
        <div id="player-top">
            <div id="amplitude-play-pause" class="amplitude-paused"></div>
            <div id="track-info-container">
                <span id="amplitude-now-playing-title">Song Name</span> <span id="slash">-</span><br><span id="amplitude-now-playing-artist">Artist</span>
            </div>
            <div id="time-info-container">
                <span id="amplitude-current-time">0:00</span> / <span id="amplitude-audio-duration">0:00</span>
            </div>
            <div id="amplitude-song-slider"><div id="amplitude-track-progress"></div></div>
        </div>
        <div id="player-bottom">
            <div class="control" onclick="toggle_playlist()">
                <img src="../images/yellow-playlist.png"/> List 
            </div>
            <div class="control" id="amplitude-previous">
                <img src="../images/yellow-previous.png"/> Prev
            </div>
            <div class="control" id="amplitude-next">
                Next <img src="../images/yellow-next.png"/>
            </div>
            <div class="control" id="amplitude-shuffle">
                Mix <img id="shuffle-on-image" src="../images/yellow-shuffle-on.png"/><img id="shuffle-off-image" src="../images/yellow-shuffle.png"/>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var open_playlist = false;
        function toggle_playlist(){
            if(open_playlist){
                document.getElementById('player-playlist').style.display = 'none';
                open_playlist = false;
            }else{
                document.getElementById('player-playlist').style.display = 'block';
                open_playlist = true;
            }
        }
    </script>
    <div id="amplitude-playlist">
        <audio id="1" amplitude-artist="Jake Jendusa" amplitude-title="Song from the Styx" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg" amplitude-visual-element-id="song-1">
            <source src="songs/In%20Search%20Of/01%20Song%20from%20the%20Styx.mp3" type="audio/mp3"/>
        </audio>
        <audio id="2" amplitude-artist="Jake Jendusa" amplitude-title="Man with the Keys" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg" amplitude-visual-element-id="song-2" preload="none">
            <source src="songs/In%20Search%20Of/02%20Man%20with%20the%20Keys.mp3" type="audio/mp3"/>
        </audio>
        <audio id="3" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type="song" amplitude-visual-element-id="song-3" preload="none">
            <source src="songs/In%20Search%20Of%20EP/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
        </audio>
    </div>
</html>

And since we have added some new Amplitude elements, the new CSS should look like:

/* Player Styles */
#player{
    width: 334px;
    margin: auto;
    box-shadow: 1px 5px 5px #888888;
}
#player-top{
    padding: 10px;
    height: 55px;
    background-color: white;
}
#player-art{
    padding-left: 5px;
    padding-top: 5px;
    background-color: white;
}
#slash{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#track-info-container{
    float: left;
    font-size: 10px;
    width: 170px;
    overflow: hidden;
    margin-left: 10px;
}
#time-info-container{
    float: left;
    margin-top: 15px;
    font-size: 10px;
    line-height: 19px;
}
#player-bottom{
    background-color: white;
    height: 45px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.control{
    width: 70px;
    height: 35px;
    float: left;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #3b3b3b;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    padding: 5px;
    line-height: 35px;
    cursor: pointer;
}
.control:nth-child(2){
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
}
.control:nth-child(3){
    border-right: 2px solid #ccc;
}
#shuffle-on-image{
    display: none;
}
/* Amplitude Element Styles */
#amplitude-play-pause{
    width: 58px;
    height: 59px;
    cursor: pointer;
    float: left;
}
.amplitude-paused{
    background-image: url('../images/yellow-play.png');
    background-repeat: no-repeat;
}
.amplitude-playing{
    background-image: url('../images/yellow-pause.png');
    background-repeat: no-repeat;
}
#amplitude-now-playing-artist{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
}
#amplitude-now-playing-title{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#amplitude-current-time{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-audio-duration{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-song-slider{
    display: inline-block;
    height: 10px;
    border-radius: 5px;
    width: 220px;
    background-color: rgba(237,237,237,.8);
    margin-left: 10px;
    margin-top: 5px;
}
#amplitude-track-progress{
    background-color: #fad52c;
    height: 10px;
    border-radius: 5px;
    width: 0px;
}
#amplitude-album-art{
    width: 324px;
    height: 324px;
}
.amplitude-album-art-image{
    width: 324px;
    height: 324px;
}

Step 10: Adding the Playlist Visual Display

The majority of the visual display is for CSS styles only, however amplitude does some feedback on highlighting the element representing the current song playing, and allowing you to play a song from the visual playlist.

<div id="player-playlist">
    <div class="playlist-song" id="song-1">
        <div class="playlist-song-album-art">
            <img src="album-art/jendusa.jpg">
        </div>
        <div class="playlist-song-information">
            Song: Song from the Styx<br>
            Artist: Jake Jendusa<br>
            Album: In Search Of
        </div>
        <div class="playlist-audio-controls">
            <div class="amplitude-play-playlist" amplitude-song-id="1"></div>
        </div>
    </div>
    <div class="playlist-song" id="song-2">
        <div class="playlist-song-album-art">
            <img src="album-art/jendusa.jpg">
        </div>
        <div class="playlist-song-information">
            Song: Man with the Keys<br>
            Artist: Jake Jendusa<br>
            Album: In Search Of
        </div>
        <div class="playlist-audio-controls">
            <div class="amplitude-play-playlist" amplitude-song-id="2"></div>
        </div>
    </div>
    <div class="playlist-song" id="song-3">
        <div class="playlist-song-album-art">
            <img src="album-art/jendusaep.jpg">
        </div>
        <div class="playlist-song-information">
            Song: Porch Stomp Blues<br>
            Artist: Jake Jendusa<br>
            Album: In Search Of EP
        </div>
        <div class="playlist-audio-controls">
            <div class="amplitude-play-playlist" amplitude-song-id="3"></div>
        </div>
    </div>
</div>

The 2 things that make the visual playlist work with the audio elements of Amplitude:

  1. The id on the visual playlist song wrapper.

In this display, the individual song is represented by a class called ‘playlist-song’ this is NOT an Amplitude class, however that same element has an id. This ID should relate to the attribute on the playlist song named ‘amplitude-visual-element-id’. For example, the third song in the playlist, has an attribute: ‘amplitude-visual-element-id=”song-3″‘. The visual element id =”song-3″ is what receives the class ‘amplitude-now-playing’ class when it is playing.

  1. The extra play buttons on the playlist.

There is a play button for each song on the visual playlist. It is represented by class ‘amplitude-play-playlist’. and it is bound with an attribute of ‘amplitude-song-id=#’. On page load, Amplitude finds all classes that are ‘amplitude-play-playlist’ and binds an event listener. When it is clicked, it gets that event and finds the attribute ‘amplitude-song-id=#’ and plays that song. For example if I were to click play on the second song on the visual playlist which has an ‘amplitude-song-id=2’, audio tag id = 2 would play.

Our new HTML should look like:

<!DOCTYPE html>
<html>
    <head>
        <title>Single Song Picture Tutorial</title>
        <script type="text/javascript" src="../amplitude.js"></script>
        <link rel="stylesheet" type="text/css" href="playlist-styles.css"/>
    </head>

    <div id="player">
        <div id="player-art">
            <div id="amplitude-album-art"></div>
        </div>
        <div id="player-top">
            <div id="amplitude-play-pause" class="amplitude-paused"></div>
            <div id="track-info-container">
                <span id="amplitude-now-playing-title">Song Name</span> <span id="slash">-</span><br><span id="amplitude-now-playing-artist">Artist</span>
            </div>
            <div id="time-info-container">
                <span id="amplitude-current-time">0:00</span> / <span id="amplitude-audio-duration">0:00</span>
            </div>
            <div id="amplitude-song-slider"><div id="amplitude-track-progress"></div></div>
        </div>
        <div id="player-playlist">
            <div class="playlist-song" id="song-1">
                <div class="playlist-song-album-art">
                    <img src="album-art/jendusa.jpg">
                </div>
                <div class="playlist-song-information">
                    Song: Song from the Styx<br>
                    Artist: Jake Jendusa<br>
                    Album: In Search Of
                </div>
                <div class="playlist-audio-controls">
                    <div class="amplitude-play-playlist" amplitude-song-id="1"></div>
                </div>
            </div>
            <div class="playlist-song" id="song-2">
                <div class="playlist-song-album-art">
                    <img src="album-art/jendusa.jpg">
                </div>
                <div class="playlist-song-information">
                    Song: Man with the Keys<br>
                    Artist: Jake Jendusa<br>
                    Album: In Search Of
                </div>
                <div class="playlist-audio-controls">
                    <div class="amplitude-play-playlist" amplitude-song-id="2"></div>
                </div>
            </div>
            <div class="playlist-song" id="song-3">
                <div class="playlist-song-album-art">
                    <img src="album-art/jendusaep.jpg">
                </div>
                <div class="playlist-song-information">
                    Song: Porch Stomp Blues<br>
                    Artist: Jake Jendusa<br>
                    Album: In Search Of EP
                </div>
                <div class="playlist-audio-controls">
                    <div class="amplitude-play-playlist" amplitude-song-id="3"></div>
                </div>
            </div>
        </div>
        <div id="player-bottom">
            <div class="control" onclick="toggle_playlist()">
                <img src="../images/yellow-playlist.png"/> List 
            </div>
            <div class="control" id="amplitude-previous">
                <img src="../images/yellow-previous.png"/> Prev
            </div>
            <div class="control" id="amplitude-next">
                Next <img src="../images/yellow-next.png"/>
            </div>
            <div class="control" id="amplitude-shuffle">
                Mix <img id="shuffle-on-image" src="../images/yellow-shuffle-on.png"/><img id="shuffle-off-image" src="../images/yellow-shuffle.png"/>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var open_playlist = false;
        function toggle_playlist(){
            if(open_playlist){
                document.getElementById('player-playlist').style.display = 'none';
                open_playlist = false;
            }else{
                document.getElementById('player-playlist').style.display = 'block';
                open_playlist = true;
            }
        }
    </script>
    <div id="amplitude-playlist">
        <audio id="1" amplitude-artist="Jake Jendusa" amplitude-title="Song from the Styx" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg" amplitude-visual-element-id="song-1">
            <source src="songs/In%20Search%20Of/01%20Song%20from%20the%20Styx.mp3" type="audio/mp3"/>
        </audio>
        <audio id="2" amplitude-artist="Jake Jendusa" amplitude-title="Man with the Keys" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg" amplitude-visual-element-id="song-2" preload="none">
            <source src="songs/In%20Search%20Of/02%20Man%20with%20the%20Keys.mp3" type="audio/mp3"/>
        </audio>
        <audio id="3" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type="song" amplitude-visual-element-id="song-3" preload="none">
            <source src="songs/In%20Search%20Of%20EP/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
        </audio>
    </div>
</html>

And our css should look like:

/* Player Styles */
#player{
    width: 334px;
    margin: auto;
    box-shadow: 1px 5px 5px #888888;
}
#player-top{
    padding: 10px;
    height: 55px;
    background-color: white;
}
#player-art{
    padding-left: 5px;
    padding-top: 5px;
    background-color: white;
}
#slash{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#track-info-container{
    float: left;
    font-size: 10px;
    width: 170px;
    overflow: hidden;
    margin-left: 10px;
}
#time-info-container{
    float: left;
    margin-top: 15px;
    font-size: 10px;
    line-height: 19px;
}
#player-bottom{
    background-color: white;
    height: 45px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.control{
    width: 70px;
    height: 35px;
    float: left;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #3b3b3b;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    padding: 5px;
    line-height: 35px;
    cursor: pointer;
}
.control:nth-child(2){
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
}
.control:nth-child(3){
    border-right: 2px solid #ccc;
}
#shuffle-on-image{
    display: none;
}
#player-playlist{
    height: 200px;
    width: 100%;
    background-color: black;
    display: none;
    color: white;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 11px;
    overflow: scroll;
}
.playlist-song{
    clear: both;
    float: left;
    margin-bottom: 3px;
    width: 100%;
}
.playlist-song:hover{
    background-color: #333;
    cursor:pointer;
}
.playlist-song-album-art{
    float: left;
}
.playlist-song-album-art img{
    width: 50px;
    height: 50px;
}
.playlist-song-information{
    float: left;
    margin-left: 10px;
}
/* Amplitude Element Styles */
#amplitude-play-pause{
    width: 58px;
    height: 59px;
    cursor: pointer;
    float: left;
}
.amplitude-paused{
    background-image: url('../images/yellow-play.png');
    background-repeat: no-repeat;
}
.amplitude-playing{
    background-image: url('../images/yellow-pause.png');
    background-repeat: no-repeat;
}
#amplitude-now-playing-artist{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
}
#amplitude-now-playing-title{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#amplitude-current-time{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-audio-duration{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-song-slider{
    display: inline-block;
    height: 10px;
    border-radius: 5px;
    width: 220px;
    background-color: rgba(237,237,237,.8);
    margin-left: 10px;
    margin-top: 5px;
}
#amplitude-track-progress{
    background-color: #fad52c;
    height: 10px;
    border-radius: 5px;
    width: 0px;
}
#amplitude-album-art{
    width: 324px;
    height: 324px;
}
.amplitude-album-art-image{
    width: 324px;
    height: 324px;
}
.amplitude-play-playlist{
    float: left;
    cursor: pointer;
    margin-top: 13px;
    margin-left: 70px;
    width: 12px;
    height: 15px;
    background-image: url('../images/yellow-play-small.png');
    background-repeat: no-repeat;
}
.amplitude-now-playing{
    background-color: #555;
}

As you can see in the picture below, the toggle playlist button works and the buttons work. We will be working with callbacks to make the shuffle button toggle.

Step 11: Working with Callbacks, amplitude_config variable, and amplitude_active_song_information variable

Amplitude.js has various callbacks that allow you to hook into the functions that Amplitude provides.

The callbacks are:

  • amplitude_play_callback
  • amplitude_pause_callback
  • amplitude_time_update_callback
  • amplitude_stop_callback
  • amplitude_next_song_callback
  • amplitude_previous_song_callback
  • amplitude_shuffle_callback

So when any of these events fire, you can hook into them and display information about the song. A common use would be if you had multiple locations where an image or song info would be displayed. Amplitude.js comes with a variable that stores all of the information about the current song. It is the amplitude_active_song_information JSON variable.

At any time during your app you can access:

amplitude_active_song_information.cover_art to get the url of the album artwork
amplitude_active_song_information.artist to get the name of the artist
amplitude_active_song_information.album to get the name of the album
amplitude_active_song_information.song_title to get the name of the song

To tie everything together, you must define the functions that you will run when one of the amplitude functions is run. This is the amplitude_config variable. It is simply a JSON object that you name amplitude_config and include in your document. In this object, you use the name of the call back as the key, and the name of the function you want to run as the value.

For example, if you were to display the now playing artwork in the header of your website, you would need to hook into the amplitude_play_callback. When play is called, the JSON containing the song information is updated to the current song information (*next fires play as well updating the song information). So what you would do is define your amplitude config variable like this:

<script type="text/javascript">
  amplitude_config = {
    'amplitude_play_callback': 'update_header_song_information'
  }

  function update_header_song_information(){
  //Set header song information here using the amplitude_active_song_information variable
  }
</script>

When play is called, your function will be called as well. As an order of operations note, it will be called AFTER the new song information is set.

For our example player, we only need to determine if shuffle is on or off. So we will need to add:

<script type=“text/javascript”>
    amplitude_config = {
        'amplitude_shuffle_callback': 'change_shuffle_image'
    }
    function change_shuffle_image(){
            if(amplitude_shuffle){
                document.getElementById('shuffle-on-image').style.display = 'inline-block';
                document.getElementById('shuffle-off-image').style.display = 'none';
            }else{
                document.getElementById('shuffle-on-image').style.display = 'none';
                document.getElementById('shuffle-off-image').style.display = 'inline-block';
            }
        }
</script>

What this does is just displays the shuffle on image if shuffle is enabled. Remember, amplitude_shuffle is a boolean that is available to determine whether or not the songs are being shuffled. Your final HTML should look like:

<!DOCTYPE html>
<html>
    <head>
        <title>Single Song Picture Tutorial</title>
        <script type="text/javascript" src="../amplitude.js"></script>
        <link rel="stylesheet" type="text/css" href="playlist-styles.css"/>
    </head>

    <div id="player">
        <div id="player-art">
            <div id="amplitude-album-art"></div>
        </div>
        <div id="player-top">
            <div id="amplitude-play-pause" class="amplitude-paused"></div>
            <div id="track-info-container">
                <span id="amplitude-now-playing-title">Song Name</span> <span id="slash">-</span><br><span id="amplitude-now-playing-artist">Artist</span>
            </div>
            <div id="time-info-container">
                <span id="amplitude-current-time">0:00</span> / <span id="amplitude-audio-duration">0:00</span>
            </div>
            <div id="amplitude-song-slider"><div id="amplitude-track-progress"></div></div>
        </div>
        <div id="player-playlist">
            <div class="playlist-song" id="song-1">
                <div class="playlist-song-album-art">
                    <img src="album-art/jendusa.jpg">
                </div>
                <div class="playlist-song-information">
                    Song: Song from the Styx<br>
                    Artist: Jake Jendusa<br>
                    Album: In Search Of
                </div>
                <div class="playlist-audio-controls">
                    <div class="amplitude-play-playlist" amplitude-song-id="1"></div>
                </div>
            </div>
            <div class="playlist-song" id="song-2">
                <div class="playlist-song-album-art">
                    <img src="album-art/jendusa.jpg">
                </div>
                <div class="playlist-song-information">
                    Song: Man with the Keys<br>
                    Artist: Jake Jendusa<br>
                    Album: In Search Of
                </div>
                <div class="playlist-audio-controls">
                    <div class="amplitude-play-playlist" amplitude-song-id="2"></div>
                </div>
            </div>
            <div class="playlist-song" id="song-3">
                <div class="playlist-song-album-art">
                    <img src="album-art/jendusaep.jpg">
                </div>
                <div class="playlist-song-information">
                    Song: Porch Stomp Blues<br>
                    Artist: Jake Jendusa<br>
                    Album: In Search Of EP
                </div>
                <div class="playlist-audio-controls">
                    <div class="amplitude-play-playlist" amplitude-song-id="3"></div>
                </div>
            </div>
        </div>
        <div id="player-bottom">
            <div class="control" onclick="toggle_playlist()">
                <img src="../images/yellow-playlist.png"/> List 
            </div>
            <div class="control" id="amplitude-previous">
                <img src="../images/yellow-previous.png"/> Prev
            </div>
            <div class="control" id="amplitude-next">
                Next <img src="../images/yellow-next.png"/>
            </div>
            <div class="control" id="amplitude-shuffle">
                Mix <img id="shuffle-on-image" src="../images/yellow-shuffle-on.png"/><img id="shuffle-off-image" src="../images/yellow-shuffle.png"/>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        amplitude_config = {
            'amplitude_shuffle_callback': 'change_shuffle_image'
        }
        var open_playlist = false;
        function toggle_playlist(){
            if(open_playlist){
                document.getElementById('player-playlist').style.display = 'none';
                open_playlist = false;
            }else{
                document.getElementById('player-playlist').style.display = 'block';
                open_playlist = true;
            }
        }
        function change_shuffle_image(){
            if(amplitude_shuffle){
                document.getElementById('shuffle-on-image').style.display = 'inline-block';
                document.getElementById('shuffle-off-image').style.display = 'none';
            }else{
                document.getElementById('shuffle-on-image').style.display = 'none';
                document.getElementById('shuffle-off-image').style.display = 'inline-block';
            }
        }
    </script>
    <div id="amplitude-playlist">
        <audio id="1" amplitude-artist="Jake Jendusa" amplitude-title="Song from the Styx" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg" amplitude-visual-element-id="song-1">
            <source src="songs/In%20Search%20Of/01%20Song%20from%20the%20Styx.mp3" type="audio/mp3"/>
        </audio>
        <audio id="2" amplitude-artist="Jake Jendusa" amplitude-title="Man with the Keys" amplitude-album="In Search Of" amplitude-audio-type="song" amplitude-album-art-url="album-art/jendusa.jpg" amplitude-visual-element-id="song-2" preload="none">
            <source src="songs/In%20Search%20Of/02%20Man%20with%20the%20Keys.mp3" type="audio/mp3"/>
        </audio>
        <audio id="3" amplitude-artist="Jake Jendusa" amplitude-title="Porch Stomp Blues" amplitude-album="In Search Of EP" amplitude-album-art-url="album-art/jendusaep.jpg" amplitude-audio-type="song" amplitude-visual-element-id="song-3" preload="none">
            <source src="songs/In%20Search%20Of%20EP/03%20Porch%20Stomp%20Blues.mp3" type="audio/mp3"/>
        </audio>
    </div>
</html>

And your CSS should look like:

/* Player Styles */
#player{
    width: 334px;
    margin: auto;
    box-shadow: 1px 5px 5px #888888;
}
#player-top{
    padding: 10px;
    height: 55px;
    background-color: white;
}
#player-art{
    padding-left: 5px;
    padding-top: 5px;
    background-color: white;
}
#slash{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#track-info-container{
    float: left;
    font-size: 10px;
    width: 170px;
    overflow: hidden;
    margin-left: 10px;
}
#time-info-container{
    float: left;
    margin-top: 15px;
    font-size: 10px;
    line-height: 19px;
}
#player-bottom{
    background-color: white;
    height: 45px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.control{
    width: 70px;
    height: 35px;
    float: left;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #3b3b3b;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    padding: 5px;
    line-height: 35px;
    cursor: pointer;
}
.control:nth-child(2){
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
}
.control:nth-child(3){
    border-right: 2px solid #ccc;
}
#shuffle-on-image{
    display: none;
}
#player-playlist{
    height: 200px;
    width: 100%;
    background-color: black;
    display: none;
    color: white;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 11px;
    overflow: scroll;
}
.playlist-song{
    clear: both;
    float: left;
    margin-bottom: 3px;
    width: 100%;
}
.playlist-song:hover{
    background-color: #333;
    cursor:pointer;
}
.playlist-song-album-art{
    float: left;
}
.playlist-song-album-art img{
    width: 50px;
    height: 50px;
}
.playlist-song-information{
    float: left;
    margin-left: 10px;
}
/* Amplitude Element Styles */
#amplitude-play-pause{
    width: 58px;
    height: 59px;
    cursor: pointer;
    float: left;
}
.amplitude-paused{
    background-image: url('../images/yellow-play.png');
    background-repeat: no-repeat;
}
.amplitude-playing{
    background-image: url('../images/yellow-pause.png');
    background-repeat: no-repeat;
}
#amplitude-now-playing-artist{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
}
#amplitude-now-playing-title{
    color: #3b3b3b;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-top: 20px;
}
#amplitude-current-time{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-audio-duration{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#amplitude-song-slider{
    display: inline-block;
    height: 10px;
    border-radius: 5px;
    width: 220px;
    background-color: rgba(237,237,237,.8);
    margin-left: 10px;
    margin-top: 5px;
}
#amplitude-track-progress{
    background-color: #fad52c;
    height: 10px;
    border-radius: 5px;
    width: 0px;
}
#amplitude-album-art{
    width: 324px;
    height: 324px;
}
.amplitude-album-art-image{
    width: 324px;
    height: 324px;
}
.amplitude-play-playlist{
    float: left;
    cursor: pointer;
    margin-top: 13px;
    margin-left: 70px;
    width: 12px;
    height: 15px;
    background-image: url('../images/yellow-play-small.png');
    background-repeat: no-repeat;
}
.amplitude-now-playing{
    background-color: #555;
}

This is what your player should look like:

Check out the updated AmplitudeJS demos on the AmplitudeJS website: https://521dimensions.com/open-source/amplitudejs/examples

This is a basic tutorial on how to use some of the features of AmplitudeJS. There are much more coming down the line as well as the library is still very beta.

To check out the roadmap, fork, or download Amplitude.JS visit Amplitude.js GitHub. Feel free to ask any questions, submit changes/feature requests below! If you are using AmplitudeJS on your site and have an awesome design that you would like to share, we’d love to help you share it. As we develop this library and the corresponding site, we’d love to see where Amplitude is being used and will provide a user gallery.

Special thanks to Jake Jendusa for letting us use their music in all of the demos. Check out their MySpace and Facebook for more information.

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

📔 Get Our Book ♥️ Become a Sponsor

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Follow @danpastori

Like this? Subscribe

We're privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.

    footer Close icon for our terminal looking
    Home indicator for our terminal looking footer ./footer
    You've enjoyed another post by Server Side Up (hosted by Vultr).

    Follow us on:
    - Discord
    - GitHub
    - Twitter
    - RSS

    If you like our articles, click here to get awesome content in your inbox.