A dynamic, customizable, and real-time Spotify now-playing widget that seamlessly integrates with your website or GitHub markdown files!
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
This will take approximately 5 minutes.
[!NOTE]
This guide was last updated on Aug 30, 2023. The steps might differ slightly in the future if Spotify or Vercel updates their website interfaces.
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}
.CLIENT_ID
β {CLIENT_ID}
.CLIENT_SECRET
β {CLIENT_SECRET}
.REFRESH_TOKEN
β {REFRESH_TOKEN}
.{PROJECT_NAME}.vercel.app
.In any markdown file, add the following (replace {PROJECT_NAME}
with the name you gave your Vercel project):
<a href="https://github.com/tthn0/Spotify-Readme">
<img src="https://{PROJECT_NAME}.vercel.app/api" alt="Current Spotify Song">
</a>
Please leave the anchor tag hyperlink reference to this GitHub repo to retain creator credit and for other users to find!
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 |
You can keep your fork, and thus your private Vercel instance up to date with the upstream using GitHub's Sync Fork button.
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!