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

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

0 голосов
/ 18 октября 2018

Я работаю над созданием веб-приложения, которое взаимодействует с spotify.Я начал с C #, и у меня не было проблем с доступом к API, вытягиванием моего плейлиста и извлечением из него треков, но кажется, что вы не можете воспроизводить песни с помощью веб-API spotify, расположенного здесь:

https://developer.spotify.com/documentation/web-api/

Затем я начал смотреть на API веб-воспроизведения, расположенный здесь:

https://developer.spotify.com/documentation/web-playback-sdk/

Я намереваюсь написать большую часть этого на c #, потому что мой c # намного сильнее, чем мой javascript.Часть C # работает.Я могу получить токен авторизации, вытащить свои плейлисты и треки.Я намерен передать эту информацию в javascript.

Я вытащил нижеприведенный javascript со страницы разработчика spotify.Я только понимаю это, поэтому я не знаю, почему это не работает.Будем благодарны за любую помощь, которую вы можете оказать. 

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

<script>

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

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

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

</script>

1 Ответ

0 голосов
/ 18 октября 2018

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 вызывается сразу, не дожидаясь загрузки Spotify Web Playback SDK.Как говорится в комментарии, Spotify.Player можно использовать сразу после вызова onSpotifyWebPlaybackSDKReady.

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

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

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

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

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

Для этого фрагмента необходим токен доступа, который можно получить здесь , нажав зеленую кнопку с надписью 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>
...