/README-Spotify-Status

Spotify status for readme files

Primary LanguageHTMLMIT LicenseMIT

Spotify Status (README)

View what you listen at spotify.

GitHub issues GitHub forks GitHub stars GitHub license

Image of Sandro Cagara

Demo

s4nx Playing Now

Spotify for Developers

  • Create a Spotify for Developers account
  • Get Credentials
    • Client ID
    • Client Secret
  • Go to Edit Settings
  • Find Redirect URIs:
    • Add http://localhost/callback/

Get the Refresh Token from Spotify

  • Navigate to the following URL:
    Note: copy your Client ID and paste in {SPOTIFY_CLIENT_ID} below.
https://accounts.spotify.com/authorize?client_id={PUT_YOUR_SPOTIFY_CLIENT_ID_HERE}&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/
  • After logging in, get the {GET_THE_TOKEN} portion of: http://localhost/callback/?code={GET_THE_TOKEN}

  • Create a string combining {SPOTIFY_CLIENT_ID}:{SPOTIFY_CLIENT_SECRET} (e.g. 5n7o4v5a3t7o5r2e3m1:5a8n7d3r4e2w5n8o2v3a7c5) and encode into Base64.

  • Then run a curl command:

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic {YOUR_BASE64}" -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code={YOUR_TOKEN}" https://accounts.spotify.com/api/token
  • Then save the Refresh token

Configure Vercel Application

  • Fork this Spotify Status

  • Register on Vercel

  • Create project linked to your forked respository

    Vercel

  • Add Project Name and Environment Variables:

    • SPOTIFY_REFRESH_TOKEN
    • SPOTIFY_CLIENT_ID
    • SPOTIFY_SECRET_ID
    • SPOTIFY_BAR_COLOR
      • Hex Color Don't Include #
    • SPOTIFY_ENABLE_DURATION => `Not Working properly, set to False
      • True or False

    Vercel

  • Deploy

Put this in your README.md

Small

s4nx Playing Now

[<img src="https://{DOMAIN_OF_YOUR_VERCEL_APP}/api/run-spotify-status" alt="Your alt what" width="350" />](LINK_TO_YOUR_ACCOUNT)

Medium

s4nx Playing Now

[<img src="https://{DOMAIN_OF_YOUR_VERCEL_APP}/api/run-spotify-status" alt="Your alt what" width="400" />](LINK_TO_YOUR_ACCOUNT)

Large

s4nx Playing Now

[<img src="https://{DOMAIN_OF_YOUR_VERCEL_APP}/api/run-spotify-status" alt="Your alt what" width="500" />](LINK_TO_YOUR_ACCOUNT)

Contribution

Feel Free to contribute, PR are the most welcome :)

License

Copyright (c) 2020 Sandro Cagara | Spotify Status