Skip to content

bobby_dreamer

Adding Spotify playlist to your gatsby site

web-development, music1 min read

Last updated : 26/April/2020

Follow below steps to setup Spotify Music Player in a Gatsby site,

  1. Create a account in Spotify

  2. Create a new playlist

  3. Search and Add songs to your playlist

  4. Go to your homepage in Spotify, click Your Library and then your playlist and then click on the 3 dots(...) and from submenu, copy the playlist link
    Spotify - Copy playlist link

    For me playlist link look like this,
    https://open.spotify.com/playlist/0sz2J5ZVROxMv3ZkVMTKuw?si=jN0r2_DTSaal9A92sYf1Vw

    Update the link like below(add /embed/),
    https://open.spotify.com/embed/playlist/0sz2J5ZVROxMv3ZkVMTKuw?si=Tg-Dup3iQ7ivdIGo1R5fAQ

    Note : If you miss the above step, you will get to play only 30 seconds of song in Web player

  5. Add this to your gatsby mdx file

  6. SpotifyPlay.js looks like this

All this in Spotify comes under Play Button, thats what its called. Here is the link

Preview the Spotify Player here

# Resources