oluwadareseyi / spotify-now-playing

A website that displays what you're currently listening to. Powered by Spotify's API.

Home Page:https://spotify-playing.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Display what you're currently listening to on Spotify

Useful links

Spotify

To get a Spotify client id and secret, you need to log into your Spotify Dashboard and create an app. You can call the app whatever you want, but I called mine "Now Playing". Once you've created the app, you'll be able to see your client id and secret. You'll need these to get your refresh token.

Spotify refresh token

Spotify's token expires every hour, so you need to get a new one each time it expires. To do this, you need to get a refresh token. To learn how to get a refresh token, read this article or this. You'll need "user-read-currently-playing user-read-recently-played" as your scope.

Airtable

We use airtable to store the current token and update it everytime a new one is fetched, and to also add an expiry date.

Create an airtable account and a table in airtable with the following fields:

  • token.
  • expiry.
  • created.

image

Then, go to the Airtable API page and get your API key (check "show API key") and base id for the new table.

image

Create a .env file in the root of the project and add the following vars:

  • SPOTIFY_CLIENT_ID - Your Spotify client ID
  • SPOTIFY_CLIENT_SECRET - Your Spotify client secret
  • SPOTIFY_REFRESH_TOKEN - Your Spotify refresh token
  • AIRTABLE_API_KEY - Your Airtable API key
  • AIRTABLE_BASE_ID - The base id of the airtable document you create

After this, run the app and you should be good to go.

About

A website that displays what you're currently listening to. Powered by Spotify's API.

https://spotify-playing.netlify.app/


Languages

Language:SCSS 67.3%Language:JavaScript 29.6%Language:HTML 3.1%