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
The goal of this project is to provide a centralized, modular and expandable spotify visualizer.
The API processing is delegated to a central server while multiple custom visualizers can visualize 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.)
There would also be a WebApp where parameters and color schemes can be changed for each individual visualizer connected to the server.
Also looking forward to adding HUE support in a future.
- 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
- Spotify account
- node
- npm (node packet manager)
- npm (node packet manager)
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
The server can be executed with:
npm startOr compiled with:
tsc- Implement color cycling
- Implement token refresh in mid-playback
- Optimize beat steps to omit the beats lower that then confidence threshold
- Implement socket communication
- Standardize the message exchanges from server to visualizers
- Add support for multiple visualizers
- Make the webapp for parameters tweaking
- Figure out a way to delegate the song interpretation to the server
- Code clean-up (duh)