Logic behind progress bar updates

Solved!

Logic behind progress bar updates

sqram

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?


Reply

Accepted Solutions
Marked as solution

Anent

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. 

View solution in original post

5 Replies

Anent

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 

sqram

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!

marklegosz

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 

Marked as solution

Anent

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. 

sqram

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

Suggested posts