Set Song Played Percentage with AmplitudeJS

In AmplitudeJS 3.2, we introduced a way to set the song time percentage of the current song with a public method:

Amplitude.setSongPlayedPercentage( percentage );

This simple method is really important because it allows users to implement their own song tracking elements. Also with the introduction of AmplitudeJS 3.2, we added the HTML5 progress bars for tracking buffered percentage and song played percentage along with a time_update callback. These all allow for custom implementation of song tracking elements for 100% custom look and feel of your player.

Implementing Clickable Progress Bar

One of the main features asked about in Amplitude is a progress bar that is clickable. We used to have a div tag inside of a div tag that was clickable in version 1.0. That wasn’t too accurate and I wasn’t a fan of Amplitude adding mark up to the page (also why in 3.2 we removed the song time visualization and replaced it with the progress bar). However, we can have a much more accurate implementation by implementing a clickable progress bar.

First, you’d add a <progress> element to your player:

<progress id="song-played-progress" class="amplitude-song-played-progress" amplitude-main-song-played-progress="true"></progress>

In this case, we gave it the attribute amplitude-main-song-played-progress="true" which means it will be a progress bar for whatever song is playing. You can also add attributes for song id and playlist, more info in the docs: https://521dimensions.com/open-source/amplitudejs/docs

Now that we have our progress bar which will be filled in with the current played progress, we need to add a little bit of external javascript:

document.getElementById('song-played-progress').addEventListener('click', function( e ){
    var offset = this.getBoundingClientRect();
    var x = e.pageX - offset.left;

    Amplitude.setSongPlayedPercentage( ( parseFloat( x ) / parseFloat( this.offsetWidth) ) * 100 );
});

What this does is add an event listener to the click on the progress bar. On click it calls this.getBoundingClientRect() which gets the offsets and relations for the element in the document ( See https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect ). Next we find variable x which is the event x coordinate location – the left side of the progress bar. What this does is gives us the amount of pixels IN the progress bar that the user clicked. It’s kinda weird but essentially we want to know the amount of pixels in the progress bar that was clicked so we can find the percentage of those pixels and map that to the song percentage.

Lastly, we call the new Amplitude.setSongPlayedPercentage( percentage ) method which sets the current song’s played percentage and accepts a float as a parameter. We compute the percentage by taking the number of pixels into the progress bar that was clicked, dividing that by the width of the progress bar and multiplying it by 100. This will give us the percentage within the progress bar that was clicked in the range of 0 – 100.

Implementing Your Own Progress Element

With AmplitudeJS 3.2 you can implement your own progress element. There are 3 things you will need from AmplitudeJS.

1. Amplitude.getSongPlayedPercentage()
2. Amplitude.setSongPlayedPercentage()
3. time_update callback

The combination of these 3 additions will allow for you to make your own progress elements. You will have to implement the click handlers, touch sliders, etc but working with these methods and callbacks you should have 100% of the tools necessary to do so.

The way I would approach it is first add a method for the time_update callback that first gets the song played percentage then sets your element accordingly. Something like this:

Amplitude.init({
         "songs": [...],
         "callbacks": {
             'time_update': function(){
                 var songPlayedPercentage = Amplitude.getSongPlayedPercentage();

                 /*
                     SET YOUR ELEMENT HERE PERCENT WISE
                 */
             }
         }
 });

This method will call every time the time has been updated. That’s super convenient for building progress elements. AmplitudeJS will return the current song played percentage which you might have to convert to pixels but that’d just be the width of the element * ( songPercentage / 100 ).

The next thing I would do is bind a click, touch, scroll, etc handler to your progress element. From there, when the user interacts with that element, compute the percentage from where they interacted and call

Amplitude.setSongPlayedPercentage( percentageOfInteraction );

This will set your song to the percentage of the interaction from the user, completing the functionality needed!

Let me know if you need a hand in the comments below, but from here you should have all the tools to implement a functional, accurate progress element!