topic Re: Logic behind progress bar updates in Spotify for Developers

Logic behind progress bar updates

sqram — Thu, 08 Jul 2021 14:41:14 GMT

How does one update the progress bar?

Are we supposed to poll the API (ttps://api.spotify.com/v1/me/player/)

every X milliseconds and update the UI?

Re: Logic behind progress bar updates

Anent — Fri, 09 Jul 2021 07:46:26 GMT

Not sure what SDK you are using. But on the Web Playback SDK, the player will update it's state whenever user interacts with it or the song changes. Then I created my own loop to just mimic the progress of the song if the song is playing - no need to poll. And it will update itself when the player state updates.

$: position = state.position; onInterval(() => position += state.paused ? 0 : 300, 300);

Above snippet is svelte, but the logic is:

position updates to state.position when state.position changes.
Every 300ms position is updated by 300 - aka. creating an progress bar.
If the player is paused. No progress will be added.

Above state object is: WebPlaybackState Object

Re: Logic behind progress bar updates

sqram — Sat, 10 Jul 2021 14:42:46 GMT

So what i'm doing right now is, after API call to play the song is made, I start a setInterval to update the progress bar every 100ms.

But setInterval isn't exactly reliable in since JS is single-threaded. Was wondering if there's a more accurate, fail-safe way 🙂

Looks like this is the way to go. thank you!

Re: Logic behind progress bar updates

marklegosz — Sat, 17 Jul 2021 21:58:07 GMT

I do a bit of both. I guess where the progress should be based on an interval, then periodically get the actual progress and update. About every 5 seconds currently but looking to tune the interval logic to consider actual start time and current time, things like that

Re: Logic behind progress bar updates

Anent — Tue, 20 Jul 2021 08:49:02 GMT

Just to clarify, on my snippet in my 1st message. The `state.position` is derived from: event-player-state-changed

That event is fired when the song changes, play/pause, or at random intervals.
When that event fires, it will update / correct the position. And simultaneously the timer will add progress to it.

I have had that running for a quite a while, and can't really get it out-of-sync.

Re: Logic behind progress bar updates

sqram — Fri, 23 Jul 2021 01:47:24 GMT

Ooohhh yes. this helped tremendously. thanks for clarifying that!