Skip to content
bobby_dreamer
GithubLinkedIn

Adding Spotify playlist to your gatsby site

— web-development, music — 1 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

    content/pages/music/index.mdx
    1import SpotifyPlayer from "./SpotifyPlayer";
    2

    3<SpotifyPlayer
    4  uri="spotify:user:Bobby:playlist:0sz2J5ZVROxMv3ZkVMTKuw"
    5  size="large"
    6  theme="black"
    7  view="list"
    8/>

  6. SpotifyPlay.js looks like this

    content/pages/music/SpotifyPlay.js
    1/**
    2  * Spotify player iframe widget
    3  *
    4  * @author Alexander Wallin <office@alexanderwallin.com>
    5  * @see https://developer.spotify.com/technologies/widgets/spotify-play-button/
    6  */
    7

    8  import React, { Component } from "react"
    9

    10  // Size presets, defined by Spotify
    11  const sizePresets = {
    12    large: {
    13      width: 300,
    14      height: 380,
    15    },
    16    compact: {
    17      width: 300,
    18      height: 80,
    19    },
    20  }
    21

    22  /**
    23  * SpotifyPlayer class
    24  */
    25  class SpotifyPlayer extends Component {
    26    // ------------------------------------------------------
    27    // Render
    28    // ------------------------------------------------------
    29

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

    34      if (typeof size === `string`) {
    35        size = sizePresets[size]
    36      }
    37

    38      return (
    39

    40        <iframe title="Spotify" 
    41                src="https://open.spotify.com/embed/playlist/0sz2J5ZVROxMv3ZkVMTKuw?si=Tg-Dup3iQ7ivdIGo1R5fAQ" 
    42                width="300" height="380" frameborder="0" allowtransparency="true" 
    43                allow="encrypted-media">
    44        </iframe>      
    45      )
    46    }
    47  }
    48

    49  export default SpotifyPlayer

All this in Spotify comes under Play Button.

Preview the Spotify Player here

# Resources