Проблемы с воспроизведением песен через веб-интерфейс и javascript spotify

tl; dr: Рабочий снипп в нижней части этого ответа!

Ты делаешь это

play({
  playerInstance: new Spotify.Player({ name: "..." }),
  spotify_uri: 'spotify:track:7xGfFoTpQ2E7fRF5lN10tr',
});

за пределами следующего.

window.onSpotifyWebPlaybackSDKReady = () => {
  // You can now initialize Spotify.Player and use the SDK
};

Это означает, что play вызывает вызов, не дожидаясь загрузки SDK Spotify Web Playback. Как говорится в комментарии, Spotify.Player можно использовать, как только onSpotifyWebPlaybackSDKReady.

Другая проблема заключается в том, что вы на самом деле никогда не создали устройство Spotify Connect. Это необходимо для использования Spotify Web API для управления этим точным устройством. Это работает при вызове connect на экземпляре Spotify.Player. Чтобы узнать, когда connect выполнено, и плеер готов к воспроизведению песен, вам нужно сначала определить слушателя, как показано ниже.

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

Таким образом, для достижения вашей цели вам действительно нужны два разных Spotify API. Сначала вам понадобится SDK Spotify Web Playback для создания устройства Spotify Connect (Spotify docs относятся к нему как к игроку). После этого вы можете управлять этим точным устройством Spotify Connect с помощью Spotify Web API.

Следующий фрагмент воспроизводит песню.

ПРЕДУПРЕЖДЕНИЕ. Это будет воспроизводить музыку в вашем браузере без каких-либо элементов управления!

Для этого фрагмента требуется токен доступа, который можно получить здесь, нажав зеленую кнопку " Get Your Web Playback SDK Access Token. Затем токен должен быть скопирован в строку 11 фрагмента, заменяющего <YOUR_ACCESS_TOKEN_HERE>.

index.html

<!-- Load the Spotify Web Playback SDK -->
<script src="https://sdk.scdn.co/spotify-player.js"></script>

<script>
  // Called when the Spotify Web Playback SDK is ready to use
  window.onSpotifyWebPlaybackSDKReady = () => {

    // Define the Spotify Connect device, getOAuthToken has an actual token 
    // hardcoded for the sake of simplicity
    var player = new Spotify.Player({
      name: 'A Spotify Web SDK Player',
      getOAuthToken: callback => {
        callback('<YOUR_ACCESS_TOKEN_HERE>');
      },
      volume: 0.1
    });

    // Called when connected to the player created beforehand successfully
    player.addListener('ready', ({ device_id }) => {
      console.log('Ready with Device ID', device_id);

      const play = ({
        spotify_uri,
        playerInstance: {
          _options: {
            getOAuthToken,
            id
          }
        }
      }) => {
        getOAuthToken(access_token => {
          fetch('https://api.spotify.com/v1/me/player/play?device_id=${id}', {
            method: 'PUT',
            body: JSON.stringify({ uris: [spotify_uri] }),
            headers: {
              'Content-Type': 'application/json',
              'Authorization': 'Bearer ${access_token}'
            },
          });
        });
      };

      play({
        playerInstance: player,
        spotify_uri: 'spotify:track:7xGfFoTpQ2E7fRF5lN10tr',
      });
    });

    // Connect to the player created beforehand, this is equivalent to 
    // creating a new device which will be visible for Spotify Connect
    player.connect();
  };
</script>