"Currently Playing" SVG Spotify Widget.
This project used to be a fork of https://github.com/kittinan/spotify-github-profile but since a lot code changed, I decided to start a separate repo for it.
- Click the "Open the app" button or go to https://spotiwidget.vercel.app/
- Login with your Spotify Account
- Customize your widget as you like
- Copy the generated code at the bottom of the page and place it in any Markdown file
- Enjoy!
Create a Python virtualenvironment and install dependencies
Tested with Python 3.9
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
Copy the .env.example
file and name it .env
, then populate it with the correct environment variables.
.env
file already git-ignored
- FLASK_SECRET_KEY: Random long string
- SPOTIFY_CLIENT_ID: Client ID from your spotify app (https://developer.spotify.com/dashboard/applications)
- SPOTIFY_CLIENT_SECRET: Client Secret from your spotify app (https://developer.spotify.com/dashboard/applications)
- BASE_URL: Base URL of your app, https://localhost:5000 for local development.
- FIREBASE: Base64 encode your Firebase credentials JSON file content and paste it here.
Suggestion: on Spotify Developer, as "Redirect URIs" place what will be your app url (https://something.vercel.app/) along with "https://localhost:5000/", so that you will be able to login while testing locally.
Run the local development server
python index.py
🪄 → Uses an internal script tag to handle dynamic changes. These scripts won't start on GitHub, but the rest of the widget will be displayed normally.
- 🪄 Auto refresh: I added a
<script>
tag inside the SVG that will auto refresh the widget when the song ends. - 🪄 Song progress: With the
<script>
of the point above, it's now possible to have a progress bar to show the song progress (almost entirely in CSS). - Settings to change background, sound waves and progress bar color.
- Upgraded dependencies: Not a big deal, but I bumped all the dependencies versions to the latest available.
- SCSS styles: Theme styles in SCSS (compiled when
index.py
runs).
- Plan how to manage widgets width and height automatically
- Optimize themes visuals (like scrolling titles)
- More customizations parameters
- Spotify Developer Guidelines compliancy
- "OBS-friendly" usage (as browser source)