javascript - The problem using spotify SDK, JS. Uncaught (in promise) ReferenceError: Spotify is not defined

Question

Im trying to use Spotify SDK, here is quick start documentation: https://developer.spotify.com/documentation/web-playback-sdk/quick-start/

there is nothing complicated, first of all, all i need to do is to embed this code to my index.html:

<script src="https://sdk.scdn.co/spotify-player.js"></script>

Done. Embedded. Moving Next. Then i must initialize the player, in documentation above it says to include in my index.html this:

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); }
});

... and so on ...

player.connect();
};

as you can see i must provide my Spotify Web API access token. Ok lets do this, my final script will look like this:

<script src="https://sdk.scdn.co/spotify-player.js"></script>
<script>
  function gettoken() {
    console.log("gettoken is working");
    fetch("/spotify/gettoken")
      .then((response) => {
        if (response.ok) {
          console.log("we got token");
          return response.json();
        }
      })
      .then((data) => {
        console.log("data", data.ok);
        return data.ok;
      })
      .then(
        (window.onSpotifyWebPlaybackSDKReady = (my_token) => {
          const token = my_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 is", 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();
        })
      );
  }
  gettoken();
</script>

All i did in promise is this: i wrote a function that gets access token from my backend (django if its matter), returned access token in return data.ok; and then passed it as an argument to the next then where i initialize my spotify player. Then called that function gettocken(); Everithing should work fine, i load the SDK before, then call gettocken, where i get my access token from backend and pass it to the player. When i started the project all i could see is this:

Uncaught (in promise) ReferenceError: Spotify is not defined
at fetch.then.then.then.window.onSpotifyWebPlaybackSDKReady

thats strange, it says that Spotify is not defined but i loaded it first in above. ok, i thought that somehow spotify sdk loads asynchronously and gettoken() calls BEFORE sdk is loaded. Then what i did is this: i opened https://sdk.scdn.co/spotify-player.js in a browser, copied all the js code from there, and instead of:

<script src="https://sdk.scdn.co/spotify-player.js"></script>

i put actual code that i copied from https://sdk.scdn.co/spotify-player.js in script tag before the script tag where i call gettoken(), then i started the project and got the same error. So whats wrong? How is that even possible?

Edited: Somehow my code above is working sometimes (loads in right order and my spotify player works), but in most cases it dont.

question from:https://stackoverflow.com/questions/65900713/the-problem-using-spotify-sdk-js-uncaught-in-promise-referenceerror-spotify

Answer 1

Waitting for answers