Visualize the current playing Spotify track with the album art using the web API.
This is a fork of spotifiy-visualizer by l3d00m. This fork changes the following:
- Background is darker and less bright.
- Text color is nicer.
- Font is default to Monsterrat.
- Progress bar is light blue.
- Progress bar is 3x smaller giving it a better look.
- Better Documentation.
- Clone the repo with
git clone https://github.com/l3d00m/spotify-visualizer.git
- Install dependencies with
npm install
- Create a file called
.env
in the project root with the secrets (see below) - Optional: if you want the start.bat to work, change the first line with the main-directory in it.
- Run with
npm start
or start.bat
CLIENT_ID=example-client-id
CLIENT_SECRET=example-client-secret
REFRESH_TOKEN=example-refresh-token
- Create a spotify app here
- Replace
example-client-id
with the client id andexample-client-secret
with the client secret. - Open this handy tool: https://grant.outofindex.com/spotify for generating the needed refresh token with the following steps
- Paste your above client id and secret into the
app
section on the site - On your spotify app
edit settings
>redirect URIs
addhttps://grant.outofindex.com/connect/spotify/callback
then save. - Under
scope
adduser-read-currently-playing
anduser-read-playback-state
- Now replace
example-refresh-token
in the .env file with the generated refresh-token and you're done
Alternatively you can use the Spotify API directly as described in their api docs, but this is needlessly complicated.
You can switch between your displays with Ctrl+Shift+Right
.
You can also change the default monitor in lib/main.js
on line number 9
- keep in mind that numbers start at 0
Default Monitor Line 9
in lib/main.js
Fullscreen Lines 44
and 55
in lib/main.js
Blur and Brightness of Background Line 38
in lib/index.css
Track Font Size Line 16
in lib/index.css
Track Text Color Line 17
in lib/index.css
Artist Text Color Line 61
in lib/index.css
Progress Bar Height Line 78
in lib/index.css
Progress Bar Color Line 79
in lib/index.css