Spotify Readme

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

• This step is (not) required but is appreciated.

• Head over to Spotify for Developers.
• Accept the Terms of Service if necessary.
• Verify your email address if you haven't done so already.
• Click on the Create app button.
  • In the App name & App description fields, you may put whatever you want.
  • Skip the Website field.
  • In the Redirect URI field, add http://127.0.0.1:80/callback.
  • In the Which API/SDKs are you planning to use? section, select the following:
    • Web API.
    • Web Playback SDK.
  • Agree with Spotify's TOS and click Save.
• Click on View client secret.
• Take note of the Client ID & Client Secret (used in later steps).

https://accounts.spotify.com/authorize?client_id={CLIENT_ID}&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://127.0.0.1:80/callback

• Copy and paste the above link into your browser.

  • Replace {CLIENT_ID} with the Client ID you got from your Spotify application.
  • Vist the URL.
    • Log in if you're not already signed in.
    • Click Agree.

• 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://127.0.0.1/callback/?code={CODE}.

  • Take note of the {CODE} portion of the URL.

• Head over to base64.io.

  • Create a string in the form of {CLIENT_ID}:{CLIENT_SECRET} and encode it to base 64.
  • Take note of the encoded Base64 string. We'll call this {BASE_64}.

• If you're on Windows or don't have the curl command, head over to httpie.io/cli/run.

  • Press enter.
  • Clear the pre-filled command.

• 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://127.0.0.1:80/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.

  • Take note of the refresh_token's value. We'll call this {REFRESH_TOKEN}.

• Fork this repository. The new forked repository will be at 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}.

  • Complete the PythonAnywhere tour if you'd like to (or skip it).

  • Under New console:, click on the $ Bash option.

  • Run the following commands:

    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

  • Paste in the following environment variables along with their appropriate values:

    CLIENT_ID="{CLIENT_ID}"
    CLIENT_SECRET="{CLIENT_SECRET}"
    REFRESH_TOKEN="{REFRESH_TOKEN}"

  • It should look something like this:

    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 both the Source code and Working directory fields to /home/{PA_USERNAME}/Spotify-Readme/Source/src.

    • 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/src'
      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 1 month from today.

    • You will have to login to your PythonAnywhere account and click this button every month to prevent it from shutting down. You'll get reminder emails from PythonAnywhere when the expiration date is approaching though.

  • 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://github.com/tthn0/Spotify-Readme">
    <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 to retain creator credit and help others find this project!

• To customize the widget, simply add query parameters to the endpoint. There are many possible combinations!
• The default endpoint will just be https://{PA_USERNAME}.pythonanywhere.com, which will display the song you're currently playing or your most recently played song.
• The if you want to force a song to constantly be displayed instead of syncing live with your Spotify, append the song's track ID at the end like this: https://{PA_USERNAME}.pythonanywhere.com/{TRACK_ID}.

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!