Skip to content

πŸš€ Dynamic, customizable, and real-time Spotify now-playing widget that seamlessly integrates with your website or GitHub markdown files

License

Notifications You must be signed in to change notification settings

panntod/Spotify-Readme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

31 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Spotify logo

Spotify Currently Playing Track

Dynamically generate Spotify currently playing tracks for your GitHub README or anywhere you want.

Overview

This API fetches the currently playing track from your Spotify account and generates a dynamic card displaying the track information.

Demo

Listen to Spotify


How to Use

1. Set Up Your Spotify App

1.1 Create an App

  • Go to the Spotify Dashboard
  • Create a new app
  • Click Edit Settings and add Redirect URIs (e.g., http://localhost:3000 for development, https://your-domain.vercel.app for production)

1.2 Configure .env File

  • Rename .env.example to .env
  • Copy the following values from your Spotify App and paste them into the .env file:
    • Client ID β†’ YOUR_CLIENT_ID
    • Client Secret β†’ YOUR_CLIENT_SECRET
    • Redirect URI β†’ YOUR_REDIRECT_URI

2. Installation

npm install

3. Get Authorization URL

npm run get-authorize-url

Paste the generated link into your browser and copy the "code" from the URL query string.

4. Get Refresh Token

npm run get-refresh-token <code>

Copy and paste the generated refresh token into YOUR_REFRESH_TOKEN in your .env file.

6. Start Development Server

npm run dev

5. Start the Server

npm start

API Documentation

Endpoint: Get Currently Playing Track

URL: /api

Method: GET

Response Fields

Field Type Description
timestamp number Timestamp of the data retrieval
context object Playlist or album context
item object Currently playing track details
is_playing boolean Whether the track is currently playing

Response Example

{
  "timestamp": 1739924939565,
  "context": {
    "external_urls": {
      "spotify": "https://open.spotify.com/playlist/30CcenmFhhITmOoxQ66X8u"
    },
    "href": "https://api.spotify.com/v1/playlists/30CcenmFhhITmOoxQ66X8u",
    "type": "playlist",
    "uri": "spotify:playlist:30CcenmFhhITmOoxQ66X8u"
  },
  "progress_ms": 107761,
  "item": {
    "album": {
      "album_type": "album",
      "artists": [
        {
          "external_urls": {
            "spotify": "https://open.spotify.com/artist/4RzbexUO843fc5SLqKEQCr"
          },
          "href": "https://api.spotify.com/v1/artists/4RzbexUO843fc5SLqKEQCr",
          "id": "4RzbexUO843fc5SLqKEQCr",
          "name": "Aaryan Shah",
          "type": "artist",
          "uri": "spotify:artist:4RzbexUO843fc5SLqKEQCr"
        }
      ],
      "available_markets": [],
      "external_urls": {
        "spotify": "https://open.spotify.com/album/3L97oMfs3NwT7rhC6JARH3"
      },
      "href": "https://api.spotify.com/v1/albums/3L97oMfs3NwT7rhC6JARH3",
      "id": "3L97oMfs3NwT7rhC6JARH3",
      "images": [
        {
          "height": 640,
          "url": "https://i.scdn.co/image/ab67616d0000b273a21b22bea3992eb630bba71a",
          "width": 640
        },
        {
          "height": 300,
          "url": "https://i.scdn.co/image/ab67616d00001e02a21b22bea3992eb630bba71a",
          "width": 300
        },
        {
          "height": 64,
          "url": "https://i.scdn.co/image/ab67616d00004851a21b22bea3992eb630bba71a",
          "width": 64
        }
      ],
      "name": "The Arrival",
      "release_date": "2020-01-03",
      "release_date_precision": "day",
      "total_tracks": 10,
      "type": "album",
      "uri": "spotify:album:3L97oMfs3NwT7rhC6JARH3"
    },
    "artists": [
      {
        "external_urls": {
          "spotify": "https://open.spotify.com/artist/4RzbexUO843fc5SLqKEQCr"
        },
        "href": "https://api.spotify.com/v1/artists/4RzbexUO843fc5SLqKEQCr",
        "id": "4RzbexUO843fc5SLqKEQCr",
        "name": "Aaryan Shah",
        "type": "artist",
        "uri": "spotify:artist:4RzbexUO843fc5SLqKEQCr"
      }
    ],
    "external_urls": {
      "spotify": "https://open.spotify.com/track/2e0Zxf8VntbuwfosHQbIT1"
    },
    "id": "2e0Zxf8VntbuwfosHQbIT1",
    "name": "Renegade",
    "type": "track",
    "uri": "spotify:track:2e0Zxf8VntbuwfosHQbIT1"
  },
  "is_playing": true
}

URL: /card

Method: GET

Query Parameters

Parameter Type Default Description
type string default Type of card (chord, spin)
direction string horizontal Card layout (horizontal, vertical)
textAlign string - Text alignment (left, center, right)
color string #1DB954 Only for Chord Color (Hex, URL encoded %230044FF)

Example Request

GET http://localhost:3000/card?type=chord&direction=horizontal&textAlign=center&color=%230044FF

Example Listen To Spotify

Contributing

Feel free to submit issues or pull requests if you want to improve this project!

License

This project is licensed under the MIT License.

About

πŸš€ Dynamic, customizable, and real-time Spotify now-playing widget that seamlessly integrates with your website or GitHub markdown files

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published