🎵 Spotify Visualizer 🎵

This is a rewritten version in TypeScript of my previous Spotify Visualizer, originally written in pure JavaScript.

Note: This is an underway project (Check TODOs)

_{Original project inspired from here.}

Table of Contents

1. About the project and goals
   • Preview Videos
   • Balancing Simplicity and Features
2. Features
3. Getting Started
• Prerequisites
• Setup
• Usage
4. TODOs
5. License

About the project and goals

The goal of this project is to provide a centralized, modular and scalable spotify visualizer, where anyone can write their own client (visualizer) to interact with the server and create custom visualizations of their songs.

The API processing is delegated to a central server while multiple clients can process the song interpretation as they see fit (e.g. a ws2812b LED strip connected to a Raspberry Pi, a web page that changes the background color accordingly, etc.). The server-client communication is done through SocketIO.

Eventually there will also be a WebApp where parameters and color schemes can be changed for each individual visualizer connected to the server.

Preview Videos

Previews with a WS2812b LED strip connected to a Rpi with a client connected over WiFi to the visualizer server.
https://youtu.be/3Z2Jqpxq29M
https://youtu.be/PM9xYnZyaM0

Balancing Simplicity and Features

I want to keep this as simple as posible, so anyone can copy paste 40 lines of code to have a highly customizable visualizer at home. However, adding more fancy features usually requires clients to be more complex, thus straying from the initial goal of this project.

To overcome this I have planned on adding these features as optionals so that more advanced users can take the full advantage of this project, while not letting down people that just want to see some fancy lights blinking. If you have any advice or ideas, please let me know!

Features

• Spotify API token refresh on each individual session
• A simple webapp for token authorization flow in spotify
• A backend for the Spotify API processing in nodejs
• Song Beat and Section synchronization
• Beat and Section confidence filtering
• Reactiveness to the song, meaning color jumps are larger during the chorus, for example
  
  

Getting Started

Prerequisites

• Spotify account
• node
  • npm/pnpm (node packet manager)
• SocketIO client (for the clients)
  
  

Setup

Install all node dependencies executing this in the root directory

npm install

Then create a .env in the root folder with the following keys:

CLIENT_ID=
CLIENT_SECRET=

And fill the values with your spotify client ID and Secret
You can get them here, creating an app and copying the client ID and Client Secret from the page

Usage

The server can be executed with:

npm start

Or compiled with:

tsc

TODOs

• Implement color cycling
• Implement token refresh in mid-playback
• Figure out a way to delegate the song interpretation to the server
• Add support for multiple visualizers
• Implement socket communication
• Implement individual visualizer customization
• Make color jump related to song attributes
• Standardize the message exchanges from server to visualizers
• Add parameter for brightness
• Create API
• Create sample visualizer that changes colors along the strip
• Fix color palette creations so the colors chosen are more predominant
• Add option for in color palette jump (just shift)
• Solve missing song attributes bug when song changes
• Solve colors flickering when song changes
• Implement reliable over network communication
• Fine tune palette sizes
• Optimize beat steps to omit the beats lower that then confidence threshold
• Make the webapp for parameters tweaking
• Think on implementing way of interactively knowing the visualizer color processing speed
• Code clean-up (duh)

License

GPL-3.0-or-later