A dynamic, customizable, and real-time Spotify now-playing widget for your README 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 PRs/issues/suggestions π
/api
/api?spin=true
/api?scan=true
/api?rainbow=true
/api?theme=dark
- Head over to the Spotify developer portal.
- Create a Spotify application.
- In the App name & App description fields, you may put whatever you want.
- Agree with Spotify's TOS and click Create.
- Take note of the Client ID & Client Secret.
- Click Edit Settings.
- Add
http://localhost/callback/
to Redirect URIs.
- Add
- Create a Spotify application.
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.
- 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.
- Replace
-
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}
.- Take note of the
{CODE}
portion of the URL.
- Take note of the
-
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 base 64 string.
- Create a string in the form of
-
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://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.
- Take note of the
refresh_token
's value.
- Take note of the
- Fork this repository.
- Head over to Vercel and create an account if you don't already have one.
- Add a new project on Vercel.
- Link your GitHub account if you haven't done so already.
- Make sure Vercel has access to the forked respository.
- Import the forked respository into your project.
- Give it a meaningful project name.
- Add the following environment variables with their appropriate values:
CLIENT_ID
CLIENT_SECRET
REFRESH_TOKEN
- Click Deploy.
- Click Continue to Dashboard.
- Find the Domains field and take note of the URL.
- Example:
{PROJECT_NAME}.vercel.app
.
- Example:
- Find the Domains field and take note of the URL.
- Add a new project on Vercel.
-
In any markdown file, add the following line (replace
{PROJECT_NAME}
with the name you gave your Vercel project):![Spotify Song](https://{PROJECT_NAME}.vercel.app/api)
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! (If you're on mobile and have a small screen, use a desktop browser or change the zoom level to zoom out.)
Parameter | Default | Values |
---|---|---|
spin |
false |
false , true |
scan |
false |
false , true |
theme |
light |
light , dark |
rainbow |
false |
false , true |
This wasn't a completely original idea. This is my own take of novatorem's project that was supposed to be for me only, but others have asked for the source code so I made this repo. I also incorporated the latest two PR's from the orignal project into this one and made it easy to customize.