Adding Spotify playlist to your gatsby site

2 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

    import SpotifyPlayer from "./SpotifyPlayer";
 
<SpotifyPlayer
  uri="spotify:user:Bobby:playlist:0sz2J5ZVROxMv3ZkVMTKuw"
  size="large"
  theme="black"
  view="list"
/>

  6. SpotifyPlay.js looks like this
    ```js:title=content/pages/music/SpotifyPlay.js
    /**

    import React, { Component } from “react”

    // Size presets, defined by Spotify
    const sizePresets = {
    large: {
    width: 300,
    height: 380,
    },
    compact: {
    width: 300,
    height: 80,
    },
    }

    /**

    • SpotifyPlayer class
      */
      class SpotifyPlayer extends Component {
      // ------------------------------------------------------
      // Render
      // ------------------------------------------------------

      render() {
      // const { uri, view, theme } = this.props
      let { size } = this.props

      if (typeof size === string) {
      size = sizePresets[size]
      }

      return (

      <iframe title="Spotify" 
        src="https://open.spotify.com/embed/playlist/0sz2J5ZVROxMv3ZkVMTKuw?si=Tg-Dup3iQ7ivdIGo1R5fAQ" 
        width="300" height="380" frameborder="0" allowtransparency="true" 
        allow="encrypted-media">
</iframe>

      )
      }
      }

    export default SpotifyPlayer
    ```

All this in Spotify comes under Play Button.

# Resources