Hi, I built a player roughly off the simple blue playlist template. However, I’d like to figure out how to put the progress bar behind each song as it plays, with the duration counter to the right. No wave form. No dot either. Just a simple bar moving behind – and the user could then click anywhere to progress in the track, backward or forward. To give you an idea of exactly what I mean, these players on this Squarespace site - Music — Tom Marsh just the way the bar moves across, very minimal, with the duration counter on the right. But unlike this I would style it more like a connected playlist. Ideally I could have the play/pause button to the side of each track like this too. Anyway let me know if this is possible, thanks!
Hi @jwing ,
It’s completely possible. Most of it would come down to styling (which can be tricky with the progress element). This example could be of help: https://codepen.io/521dimensions/pen/OGyJyW.
Otherwise, if you are looking at filling in an element where the user can click at a certain percentage within the element and it navigates, I’d do a combination of callbacks (timeupdate :Callbacks - AmplitudeJS Documentation) and a click handler to judge the position:
/*
Handles a click on the song played progress bar.
*/
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 );
});
Let me know if that helps!