By using Spotify developer tools, you accept our Developer Terms of Service. They contain important information about what you can and can’t do with our developer tools. Please read them carefully.

Introduction

The Web Playback SDK is client-side JavaScript library which allows you to create a new player in Spotify Connect and play any audio track from Spotify in the browser via Encrypted Media Extensions.

You can read more about the SDK in the overview, or dig into the reference documentation. In this Quick Start, we will be adding the Web Playback SDK to a simple HTML page.

Authenticating with Spotify

You will need an access token from your personal Spotify Premium account. Click the button below to quickly obtain your access token.

Notes:

  • Required scopes: ["streaming", "user-read-birthdate", "user-read-email", "user-read-private"]
  • Your access token above expires in 1 hour. You can come back here and generate a new access token.
  • The Web Playback SDK only works in client-side JavaScript. Node.JS is not supported.
  • For production apps, consider integrating an authorization process with the Web API.

Installing the SDK

To install the Web Playback SDK, you are required to embed the JS library inside your HTML:


<!DOCTYPE html>
<html>
<head>
  <title>Spotify Web Playback SDK Quick Start Tutorial</title>
</head>
<body>
  <h1>Spotify Web Playback SDK Quick Start Tutorial</h1>
  <h2>Open your console log: <code>View > Developer > JavaScript Console</code></h2>

  <script src="https://sdk.scdn.co/spotify-player.js"></script>
  <!-- We will insert our code here. -->
</body>
</html>

Initializing the SDK

Below the Web Playback SDK library, you must initialize the player immediately. See the code below.

window.onSpotifyWebPlaybackSDKReady = () => {
  const token = '[My Spotify Web API access token]';
  const player = new Spotify.Player({
    name: 'Web Playback SDK Quick Start Player',
    getOAuthToken: cb => { cb(token); }
  });

  // Error handling
  player.addListener('initialization_error', ({ message }) => { console.error(message); });
  player.addListener('authentication_error', ({ message }) => { console.error(message); });
  player.addListener('account_error', ({ message }) => { console.error(message); });
  player.addListener('playback_error', ({ message }) => { console.error(message); });

  // Playback status updates
  player.addListener('player_state_changed', state => { console.log(state); });

  // Ready
  player.addListener('ready', ({ device_id }) => {
    console.log('Ready with Device ID', device_id);
  });

  // Not Ready
  player.addListener('not_ready', ({ device_id }) => {
    console.log('Device ID has gone offline', device_id);
  });

  // Connect to the player!
  player.connect();
};

Upon adding this to a web page, you should run the page in a browser. At that point you should have initialized & connected a new player called “Web Playback SDK Quick Start Player” in Spotify Connect.

Listening through the SDK

To play a track inside your browser, connect to the Web Playback SDK Quick Start Player player in another Spotify client. Then play a song and you should hear it playing in your browser.

Congratulations! You’ve interacted with the Web Playback SDK for the first time. Time to celebrate, you did a great job! 👏

Want more? Here’s what you can do next:

Source Code

The Quick Start source code is below. Copy into an index.html and open in a supported browser.

<!DOCTYPE html>
<html>
<head>
  <title>Spotify Web Playback SDK Quick Start Tutorial</title>
</head>
<body>
  <h1>Spotify Web Playback SDK Quick Start Tutorial</h1>
  <h2>Open your console log: <code>View > Developer > JavaScript Console</code></h2>

  <script src="https://sdk.scdn.co/spotify-player.js"></script>
  <script>
    window.onSpotifyWebPlaybackSDKReady = () => {
      const token = '[My Spotify Web API access token]';
      const player = new Spotify.Player({
        name: 'Web Playback SDK Quick Start Player',
        getOAuthToken: cb => { cb(token); }
      });

      // Error handling
      player.addListener('initialization_error', ({ message }) => { console.error(message); });
      player.addListener('authentication_error', ({ message }) => { console.error(message); });
      player.addListener('account_error', ({ message }) => { console.error(message); });
      player.addListener('playback_error', ({ message }) => { console.error(message); });

      // Playback status updates
      player.addListener('player_state_changed', state => { console.log(state); });

      // Ready
      player.addListener('ready', ({ device_id }) => {
        console.log('Ready with Device ID', device_id);
      });

      // Not Ready
      player.addListener('not_ready', ({ device_id }) => {
        console.log('Device ID has gone offline', device_id);
      });

      // Connect to the player!
      player.connect();
    };
  </script>
</body>
</html>