search

zachwinter / kaleidosync

A WebGL Spotify visualizer made with Vue, D3, and Three.js.
https://www.kaleidosync.com
809 stars 61 forks source link

Volume syncing is off-sync by the smoothing factor used in the Volume Queue smoothing #29

Closed GeorgiaPeanuts closed 3 years ago

GeorgiaPeanuts commented 4 years ago

You can see this very easily using the kaleidoscope visualization and having the star radii being driven by the segments and setting the volume queue to use a smoothing of 120 or even higher. I noticed this because I was scaling the smoothing factor by the dancibility rating of the song from Spotify's track features endpoint so that less dancey songs had slower moving animations

The animation will lag behind the actual beat. This is happening because you are smoothing only from the past so essentially the animation will always be delayed by the smoothing factor.

To fix this I stored half the value of the currently active smoothing factor when the call is made to get the volume. Then this value is used as a lookAhead value so that the volumes you are getting are always the current and next volumes, but ahead by half the smoothing factor. This realigns the animation back in sync, but keeping the smoothing capability intact.

zachwinter commented 3 years ago

Sorry for the super late reply!

This is a great find. Thank you so much. It's gonna be a while before I'm able to update Kaleidosync/Spotify Sync's core, but I have a new implementation locally that I'd be happy to share with you if you're interested.