Unique Elements in AmplitudeJS

Now that we’ve built our first AmplitudeJS player https://serversideup.net/building-a-single-song-player/, it’s time to discuss some of the more in-depth features of AmplitudeJS. These are more unique elements that really begin to expand the functionality beyond that of the HTML5 audio element. These can be used in a variety of different circumstances and player designs and really add to the functionality and UX of your players. Let’s get started!

Song Container

This is strictly an element that enhances the UX/UI of your player. When AmplitudeJS is used in a playlist, or multiple song scenario where there is a list of songs on the screen, this feature allows you to style the active song. Now how does this work?

Say you have a list of songs like this:

<div class="song">
  Title - Artist 1
</div>
<div class="song">
  Title - Artist 2
</div>
<div class="song">
  Title - Artist 3
</div>
<div class="song">
  Title - Artist 4
</div>
<div class="song">
  Title - Artist 5
</div>

This list of songs is nice, but sometimes when you are playing a playlist you want to highlight the active song. There are two things you need to do to make this happen. First, add the following class to the element with the song class: amplitude-song-container. Next, add the attribute amplitude-song-index="INDEX" that contains the index of the song in the songs array. Your song list should look like this:

<div class="song amplitude-song-container" amplitude-song-index="0">
  Title - Artist 1
</div>
<div class="song amplitude-song-container" amplitude-song-index="1">
  Title - Artist 2
</div>
<div class="song amplitude-song-container" amplitude-song-index="2">
  Title - Artist 3
</div>
<div class="song amplitude-song-container" amplitude-song-index="3">
  Title - Artist 4
</div>
<div class="song amplitude-song-container" amplitude-song-index="4">
  Title - Artist 5
</div>

Now, whichever song is playing in AmplitudeJS by the index, a class of amplitude-active-song-container will be applied to the amplitude-song-container element. You can then style the background color, show a now playing image, whatever you like through CSS! The blue playlist player uses this to show the active song. Check it out here: Blue Playlist Example – AmplitudeJS

The next element which is unique is the amplitude-skip-to element. This is useful for binding notes to certain sections of a song, podcast, or other audio stream. Say for example you have a podcast about development. At 3 minutes and 32 seconds you start talking about VueJS. You could have in your notes for the podcast around the player something like:

Jump to <span class="amplitude-skip-to" amplitude-location="212" amplitude-song-index="0">Chapter 1: Vue JS </span>

This will skip to 3 minutes and 32 seconds into the first song in the songs array (song being whatever audio file you have). This method is super easy for annotating and skipping around the audio! Now there’s a few attributes we should talk about.

First is the amplitude-location attribute. This is in seconds where it should skip in the song. If you put an invalid time in there, AmplitudeJS will not skip to the location. This gets checked once the song can play through so you aren’t playing part of the song that hasn’t been loaded yet.

The other attribute is the amplitude-song-index. This is the index of the song in the songs array that should be skipped to. If you have multiple songs and have multiple annotations, you can put the index you choose into this element.

The one not in the example is amplitude-playlist. You can assign a skip to in a certain playlist as well. This will change the playlist if it is different than the current playlist being played. The attribute is amplitude-playlist=“PLAYLIST_KEY”.

Playback speed

When working in a podcast environment, playback speed is important. AmplitudeJS makes changing this a breeze. All you have to do is add an element with the class of amplitude-playback-speed. When this is clicked/touched, the playback speed will increase starting from 1x (normal rate), going to 1.5x, to 2x. After 2x, it toggles back down to 1x which is the normal rate. An example would be:

<span class="amplitude-playback-speed"></span>

Inside that element you could set the playback speed, set the background image to be an image with the speed, etc. Now to style for a specific speed, here are the classes that get added to the element:

1x speed gets amplitude-playback-speed-10
1.5x speed gets amplitude-playback-speed-15
2.0x speed gets amplitude-playback-speed-20

This allows you to style the element accordingly based on the current speed of the player. Now this element is a global scoped function. The playback speed is effective for whatever audio is playing regardless of playlist or not.

Song Buffered

The song buffered element shows how much of the song is currently buffered and ready for playback. This element is one of the few AmplitudeJS elements that has to be a specific type. It has to be <progress> element.

To add this element simply add the following HTML:

<progress class="amplitude-buffered-progress"></progress>

This element will fill in the percentage of how much of the song that has been buffered and ready to be played. Now styling this element can be a real pain. I’ll be diving into styling these and range elements in their own separate tutorial since they are VERY different dependent on browser. However, it’s semantically correct to use this element to show progress. If you want an example of the buffered element in action check out: Blue Playlist Example – AmplitudeJS

Song Played Progress

Similar to the song buffered element, the song played progress element needs to be a <progress> element as well. This element shows how much of the current song has been played. You can scope this element to be global (progress of whatever song is being played), playlist (progress of whatever song in the playlist is being played), or song (progress of a specific song).

An example of each are as follows:

<progress class="amplitude-song-played-progress" amplitude-main-song-played-progress="true"></progress>
<progress class="amplitude-song-played-progress" amplitude-playlist-song-played-progress="true" amplitude-playlist="PLAYLIST_KEY"></progress>
<progress class="amplitude-song-played-progress" amplitude-song-index="SONG_INDEX"></progress>

Like the other progress bar, these are a huge pain to style. I will be writing a tutorial specifically on styling progress and HTML 5 range elements so you can make the look an feel of your player 100% your own! The Blue Playlist: Blue Playlist Example – AmplitudeJS also has the song played progress bar as an example.

Let me know if there are any other elements you’d like to see examples on or if any other questions come up!

Photo Credit: Gavin Whitner