Help Wizard

Step 1


Spotify Web Playback SDK - Initial playback not working: Player not ready on 'ready' event

Spotify Web Playback SDK - Initial playback not working: Player not ready on 'ready' event






Desktop PC

Operating System

WSL Ubuntu 22.04, Chrome 107.0.5304.108


My Question or Issue


We noticed on November 25th that the Spotify Web Playback SDK stopped working on initial playback in our application. Looking at the browser console, we can see that this is due to a 404 response from the Web API's play endpoint that we call to trigger the playback of a particular track.

We wait for the player to connect and throw the ready event before initializing the playback. This worked without any issues until very recently.


Now we are getting 404s every time on the initial playback attempt, while the second and consecutive attempts work fine. I noticed that I can significantly reduce the likelihood of failure if I add a sleep statement of 1 second after connecting succesfully to the player and receiving the ready event, and thus before attempting the initial playback. This is very undesirable, however, and does not completely mitigate the issue, as we still sometimes see 404, even with this long extra waiting time.

This is the fetch version of the failed playback request:


fetch("", {
  "headers": {
    "accept": "*/*",
    "accept-language": "de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7",
    "authorization": "Bearer xxxxx",
    "content-type": "application/json",
    "sec-ch-ua": "\"Google Chrome\";v=\"107\", \"Chromium\";v=\"107\", \"Not=A?Brand\";v=\"24\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"Windows\"",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "cross-site"
  "referrer": "http://localhost:4200/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": "{\"uris\":[\"spotify:track:2Fxmhks0bxGSBdJ92vM42m\"],\"offset\":{\"uri\":\"spotify:track:2Fxmhks0bxGSBdJ92vM42m\"},\"position_ms\":0}",
  "method": "PUT",
  "mode": "cors",
  "credentials": "include"



This is my player initialization logic:


private async initPlayerIfNecessary(): Promise<void> {
  if (this.isPlayerInitialized) {
    return Promise.resolve();
  await this.createPlayer();
  await Promise.all([ this.connectPlayer(), this.waitForPlayerReady() ]);
  this.isPlayerInitialized = true;

  await new Promise((resolve) => setTimeout(resolve, 1000)); // <--- Adding this line makes it a little bit better, but I hate it

private async createPlayer(): Promise<void> {
  const token = await this.retrieveAccessToken();
  console.log('Got access token');
  this.player = new Spotify.Player({
    name: 'MyPlayer',
    getOAuthToken: (cb: (token: string) => void) => cb(token),

private async connectPlayer() {
  const success: boolean = await this.player.connect();
  if (!success) {
    return Promise.reject('The Web Playback SDK could not connect to Spotify!');
  console.log('The Web Playback SDK successfully connected to Spot ify!');
  return Promise.resolve();

private async waitForPlayerReady() {
  const data: WebPlaybackInstance = await waitForEventWithTimeout(this.player, 'ready', 2000);
  console.log('Ready with Device ID', data.device_id);
  this.deviceId = data.device_id;


Output in the browser console shows connecting the player and ready event happened before we got the 404 on the play endpoint:


The Web Playback SDK successfully connected to Spotify!
Ready with Device ID 870d6112bf2d97406821e6e368d3b84d08c59086
PUT 404



5 Replies

Also, the Web API's play endpoint is missing documentation for a 404 response, it just has some for 204, 401, 403, and 429:

Update: Today, we're seeing a lot of 502s instead of 404s on the same endpoint.

I have same issue, error 502 on request:

I am seeing the same behaviour too. The play endpoint seems to be incredibly unreliable at the moment.


I just noticed this is a duplicate of My bad. However, will leave it open as my issue contains more details.

Suggested posts