Synchronize the speed of Gifs to music on Spotify in real time

What is GifSync?

GifSync started out as a simple question: "How do I get Hat Kid to dance to my music while I stream?" The answer to this question quickly turned into a long and convoluted dive into APIs, gif frame-times, and web servers. However, through THE POWER OF THE INTERNET!! (and a ton of duck-duck-go'ing) I was able to pull it off with as best of accuracy as I could.

Best of all, it works with any gif! I wanted to share this with others so that no matter what your experience level is in programming, you too can experience gifs that dance to your music in real time.

If you're interested in reading the source code, or want to contribute to the development of GifSync, see the GitHub Repository.

How does it work?

GifSync utilizes the Spotify API to retrieve your currently playing song and modifies your gif to loop to the beat.

In more detail, GifSync uses an OAuth2 token provided by Spotify which is then used to periodically request your currently playing song. Then, the song’s BPM is requested from Spotify. Using the BPM, the Beats/Second is calculated, which in turn finds the Milliseconds/Beat. The Milliseconds/Beat is multiplied by the Beats/Loop (of the gif you’ve specified) to find the Milliseconds/Loop, and finally the frame times in the gif are adjusted to match as accurately as possible. This results in a gif that will loop every X beats of the currently playing song.

How do I get started?

Easy! You must allow GifSync to access your currently playing songs by clicking the “Connect Spotify” button at the top of this page. From there, upload the gif you want to sync, specify the number of Beats per loop of the gif, and PRESTO! A synced version of your gif will be displayed and will continuously update with your music until you leave the page or select a new gif.

If at any time you wish to revoke this site’s permission to see your currently playing song, visit your Spotify Account page and remove GifSync’s access. If you wish to only have this site forget your Authorization token and synced Gifs, click on “Forget me” on the top of the page.