A dynamic, customizable, and real-time Spotify now-playing widget for your markdown files that syncs with the song youโre currently playing. If you're not currently playing a song, it'll display one of your recent songs! Feel free to ask for help or make any pull requests, issues, or suggestions ๐
/
?spin=true
?scan=true
?theme=dark
?eq_color=0995e0
?eq_color=rainbow
?spin=true&scan=true&eq_color=rainbow&theme=dark
[!WARNING]
This guide was last updated on Jul 27, 2024. The steps might differ slightly in the future if Spotify or PythonAnywhere update their website interfaces.[!NOTE]
This will take approximately 5 minutes to set up.
http://localhost/callback/
.https://accounts.spotify.com/authorize?client_id={CLIENT_ID}&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/
Copy and paste the above link into your browser.
{CLIENT_ID}
with the Client ID you got from your Spotify application.After you get redirected to a blank page, retrieve the URL from your browser's URL bar. It should be in the following format: http://localhost/callback/?code={CODE}
.
{CODE}
portion of the URL.Head over to base64.io.
{CLIENT_ID}:{CLIENT_SECRET}
and encode it to base 64.{BASE_64}
.If you're on Windows or don't have the curl
command, head over to httpie.io/cli/run.
If you're on Linux or Mac with the curl
command, open up your preferred terminal.
Run the following command (replace {BASE_64}
and {CODE}
with their respective values):
curl \
-X POST \
-H "Content-Type: application/x-www-form-urlencoded" \
-H "Authorization: Basic {BASE_64}" \
-d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code={CODE}" \
https://accounts.spotify.com/api/token
If you did everything correctly, you should get a response in the form of a JSON object.
refresh_token
's value. We'll call this {REFRESH_TOKEN}
.https://github.com/{GITHUB_USERNAME}/Spotify-Readme
, where {GITHUB_USERNAME}
is your GitHub username.Head over to PythonAnywhere, and Create a Beginner Account
if you don't already have one. Take note of your username. We'll call this {PA_USERNAME}
.
New console:
, click on the Bash
option.git clone https://github.com/{GITHUB_USERNAME}/Spotify-Readme
mkvirtualenv --python=/usr/bin/python3.10 venv
pip install -r Spotify-Readme/Source/requirements.txt
nano Spotify-Readme/Source/.env
CLIENT_ID="{CLIENT_ID}"
CLIENT_SECRET="{CLIENT_SECRET}"
REFRESH_TOKEN="{REFRESH_TOKEN}"
CLIENT_ID="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
CLIENT_SECRET="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
REFRESH_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
Press Ctrl + X
, then Y
, then Enter
to save the file.
Click on the PythonAnywhere logo on the upper left corner to go back to the main dashboard.
Click on Web
in the navigation bar.
Click Add a new web app
.
Take note of your web app's domain name.
Click Next ยป
.
Select Manual configuration
.
Select Python 3.10
.
Click Next ยป
.
Scroll down to the Code
section.
Change the Source code
field to /home/{PA_USERNAME}/Spotify-Readme/Source
.
Open the WSGI configuration file
in a new tab and add the following to the bottom of the file:
import sys
path = '/home/{PA_USERNAME}/Spotify-Readme/Source'
if path not in sys.path:
sys.path.append(path)
from main import app as application
Click Save
and close out the tab.
Back on the Web
tab, click Enter path to a virtualenv, if desired
.
Type venv
and click the check mark.
This should automatically fill in the field with the correct path to the virtual environment we created earlier.
Enable Force HTTPS
.
Scroll back up to the top of the page.
Click Run until 3 months from today
.
Click Reload {PA_USERNAME}.pythonanywhere.com
.
Now it's deployed and ready to be used!
In any markdown file, add the following code:
<a href="https://{PA_USERNAME}.pythonanywhere.com/link">
<img
src="https://{PA_USERNAME}.pythonanywhere.com"
alt="Current Spotify Song"
/>
</a>
Of course, you can append query parameters to the URL to customize the widget!
Please leave the anchor tag hyperlink reference if you'd to be able to dynamically link your current song, so people listen to the preview. Also, the link helps to retain creator credit and helps others find this project!
To customize the widget, add query parameters to the endpoint. There are many possible combinations! See how it pairs with other widgets on my own README!
Parameter | Default | Values |
---|---|---|
spin |
false |
false , true |
scan |
false |
false , true |
theme |
light |
light , dark |
eq_color |
1ED760 |
rainbow , Any Hex Color w/o Hash Sign |
You can keep your fork, and thus your private PythonAnywhere instance up to date, with the upstream using GitHub's Sync Fork button! After doing so, log back into your PythonAnywhere account and open a new console to pull in the changes.
This wasn't a completely original idea. This was inspired by novatorem's project that was supposed to be for me only. Since others have asked for the source code, I decided to make this a public repo. I also incorporated the latest two PR's from the orignal project into this one and made it easy to customize!