👩🎤 Share your love to music with the world 🌍. Put Spotify badge in any place where you can post an image.
If you want to share your love of music with the world you are in right place. You can share your currently playing track from your Spotify with just an image.
🎸 playing now - current state of track with real-time progress bar 🎬 ended state – when track is ended badge transitions to this state ⏸ paused state - when current track is paused in player 📭 idle state – not playing
SPOTIFY_CLIENT_ID
and Client Secret to SPOTIFY_CLIENT_SECRET
and put just -
to SPOTIFY_REFRESH_TOKEN
.API_CORS_HOST
as host from which you plan to call the API endpoint. Read more
prod
label of your application/api/auth
to deployment domain. It should looks like this https://spotify-badge-c74hazo6k-akellbl4.vercel.app/api/auth
.https://spotify-badge-c74hazo6k-akellbl4.vercel.app.akellbl4.vercel.app/api/auth
You can copy this snippet and change domain in the url to domain of your application and post it wherever you would like
<img
src="https://spotify-playing-now-readme.vercel.app/api/now-playing.svg"
width="540"
height="52"
/>
To make API available you need to specify API_CORS_HOST
after you deployed the app.
API_CORS_HOST
and put site address from which you plan make requests for example https://example.com
(the variable will be set to Access-Control-Allow-Origin
header. More about the header)GET /api/now-playing
Response:
When something is playing
type Response =
/** When a track is playing */
{
progress: number | null;
duration: number;
track: string;
artist: string;
isPlaying: boolean;
coverUrl: string;
url: string;
}
/** When nothing is playing */
| {
isPlaying: false;
}
.env.example
to .env
and add values to env variablesyarn
for dependencies installationyarn dev
for starting development server