Plan
Premium
Country
Germany
Device
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("https://api.spotify.com/v1/me/player/play?device_id=870d6112bf2d97406821e6e368d3b84d08c59086", {
"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 https://api.spotify.com/v1/me/player/play?device_id=870d6112bf2d97406821e6e368d3b84d08c59086 404
