Help Wizard

Step 1


Who Me Too'd this topic

Web Playback SDK sometimes produces 400 response on item_ready endpoint






Web Playback SDK (Google Chrome Version 101.0.4951.41 (Official Build) (64-bit))

Operating System

Ubuntu 20.04


My Question or Issue


Hi there,


I use the Web Playback SDK for playback in an Angular app. About 1 in 5 times, after loading the app, when I play a song, I see a 400 response from an "events/item_ready" endpoint that the SDK seems to call internally. Note that I await the "ready" event before initializing playback. It does not seem to affect playback functionality at all, but it will be re-thrown every time I initialize playback on another song once the player/api-wrapper is in that state.

This is a request I copied from the Network tab that produced such a 400 response (I removed the auth token for this post):


fetch("", { "headers": { "accept": "*/*", "accept-language": "de,en-US;q=0.9,en;q=0.8", "authorization": "Bearer *****", "content-type": "application/json", "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"101\", \"Google Chrome\";v=\"101\"", "sec-ch-ua-mobile": "?0", "sec-ch-ua-platform": "\"Linux\"", "sec-fetch-dest": "empty", "sec-fetch-mode": "cors", "sec-fetch-site": "cross-site" }, "referrer": "", "referrerPolicy": "strict-origin-when-cross-origin", "body": "{\"timestamp\":1652174002349,\"player_state\":{\"playback_id\":\"5f560042b9e0258a708ec1774387e1ee\",\"duration\":252818,\"current_position\":0,\"paused\":false,\"playbackQuality\":{\"hifi_status\":\"NONE\",\"audio_quality\":\"VERY_HIGH\"}},\"playback_descriptor_id\":\"CIDQDxANGgVBVURJTw==\",\"initial_loading_stats\":{}}", "method": "POST", "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;

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;


I then use the spotifyWebApi to initialize playback with this function:

async play(trackId: string): Promise<void> {
await this.initPlayerIfNecessary();
const selectedUri = `spotify:track:${trackId}`;
const options = {
device_id: this.deviceId,
uris: [selectedUri],
offset: {
uri: selectedUri
return this.playNew(options);

private playNew(options: PlayParameterObject): Promise<void> {

For brevity, I chose not to go into the details of the @spotifyAuthProtected decorator or some other referenced functions.

Is this behavior a bug in the SDK or am I missing something in my implementation?

Who Me Too'd this topic