通过 spotify web api 和 javascript 播放歌曲的问题

Posted 2023-04-15

【中文标题】通过 spotify web api 和 javascript 播放歌曲的问题

【英文标题】：problem playing songs via the spotify web api and javascript

【发布时间】：2019-03-23 15:12:43

【问题描述】：

我正在构建一个与 spotify 交互的基于 Web 的应用程序。我从 C# 开始，访问 API、提取我的播放列表并从中提取曲目没有问题，但您似乎无法使用位于此处的 spotify Web API 播放歌曲：

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

然后我开始查看位于此处的 Web Playback API：

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

我打算用 c# 编写大部分内容，因为我的 c# 比我的 javascript 强大得多。 c# 部分正在工作。我可以获得授权令牌，提取我的播放列表和曲目。我打算将此信息传递给 javascript。

我从 spotify 开发者页面中提取了以下 javascript。我只是有点理解它，所以我不知道为什么它不起作用。非常感谢您提供的任何帮助。

<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】：

tl;dr：在这个答案的底部工作 sn-p！

---

你这样做

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 设备。为了使用 Spotify Web API 来控制该确切的设备，这是必需的。这可以通过在 Spotify.Player 实例上调用 connect 来实现。为了知道connect何时完成并且播放器准备好播放歌曲，您需要首先定义一个监听器，如下所示。

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

因此，您实际上需要两个不同的 Spotify API 来实现您的目标。首先，您需要 Spotify Web Playback SDK 来创建 Spotify Connect 设备（Spotify 文档将其称为播放器）。之后，您可以使用 Spotify 的 Web API 控制这个确切的 Spotify Connect 设备。

---

下面的 sn-p 将播放歌曲。

警告：这将在您的浏览器中播放音乐，无需任何控制元素！

这个sn-p需要一个访问令牌，可以通过点击绿色按钮Get Your Web Playback SDK Access Token来获得here。然后需要将令牌复制粘贴到 sn-p 的第 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>

【讨论】：

非常感谢@David 的帮助。它对我不起作用，但我认为我很接近。 页面已加载但为空白。我用我的访问令牌替换了 YOUR_ACCESS_TOKEN_HERE。我没有提供设备 ID，因为文档指出，如果没有提供，它将在任何处于活动状态的设备上播放。 在控制台中，我收到一个 403 错误（禁止访问），网址为：api.spotify.com/v1/melody/v1/check_scope?scope=web-playback 当我单击该网址时，我收到一个 401 错误，没有提供令牌。 想法？ 谢谢你 - 格雷格

空白页是正确的行为。我建议在发布时使用 sn-p。所以只需保留device_id 参数。听起来您没有使用我发布的链接来获取令牌，而是使用您自己的软件来检索它。在这种情况下，您需要确保包含以下范围。 streaming, user-read-birthdate, user-read-email & user-read-private.

成功了！谢谢！你是对的，我需要从你提供的链接中获取令牌。我收到的授权令牌不起作用。我认为它会因为一旦我收到它，我就可以访问我的播放列表、曲目等并提取信息，但也许该令牌仅适用于 WEB API 而不是 WEB PLAYBACK SDK。再次感谢。

如我所说。您的应用收到的令牌应该也可以正常工作，您只需要确保包含我之前评论中提到的所需范围。我很高兴能帮上忙！您介意接受/支持我的回答吗？

您是否尝试过使用您自己的软件中的访问令牌？正如我所说，使用所需的范围应该也可以工作。