通过spotify web api和javascript播放歌曲时出现问题

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

然后，我开始查看位于此处的Web播放API：

我打算用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>

window.onPotifyWebPlayBacksdkReady=（）=>{
//现在可以初始化Spotify.Player并使用SDK
};
常量播放=({
spotify_uri，
玩家立场：{
_选项：{
getOAuthToken，
身份证件
}
}
}) => {
getOAuthToken（访问令牌=>{
取（'https://api.spotify.com/v1/me/player/play', {
方法：'放'，
正文：JSON.stringify（{uris:[spotify_uri]}），
标题：{
“内容类型”：“应用程序/json”，
'Authorization'：'Bearer${myaccesstoken}'
},
});
});
};
玩({
playerInstance:新的Spotify.Player（{name:“…”}），
spotify_uri:'spotify:track:7xGfFoTpQ2E7fRF5lN10tr'，
});

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

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

这意味着

play

将立即被调用，而无需等待Spotify Web播放SDK加载。正如评论所说，

Spotify.Player

可以在调用

onSpotifyWebPlaybackSDKReady

后立即使用

---

另一个问题是，您实际上从未创建过Spotify Connect设备。这是使用Spotify Web API控制确切设备所需的。这是通过在

Spotify.Player

实例上调用

connect

实现的。为了知道连接何时完成，播放机何时准备好播放歌曲，您需要首先定义一个侦听器，如下所示

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

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

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

---

下面的片段将播放这首歌

警告：这将在浏览器中播放音乐，而不使用任何控制元素

此代码段需要一个访问令牌，可以通过单击绿色按钮获得该令牌，该按钮的意思是

Get Your Web Playback SDK access token

。然后需要将令牌复制粘贴到代码段的第11行中，替换

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>

//当Spotify Web播放SDK准备好使用时调用
window.onPotifyWebPlayBacksdkReady=（）=>{
//定义Spotify Connect设备时，getOAuthToken具有实际的令牌
//为了简单起见而硬编码
var player=新的Spotify.player({
名称：“Spotify Web SDK播放器”，
getOAuthToken:回调=>{
回调（“”）；
},
数量：0.1
});
//连接到预先成功创建的播放器时调用
player.addListener（'ready'，（{device\u id}）=>{
console.log（'Ready with Device ID'，Device_ID'）；
常量播放=({
spotify_uri，
玩家立场：{
_选项：{
getOAuthToken，
身份证件
}
}
}) => {
getOAuthToken（访问令牌=>{
取回(`https://api.spotify.com/v1/me/player/play?device_id=${id}`{
方法：'放'，
正文：JSON.stringify（{uris:[spotify_uri]}），
标题：{
“内容类型”：“应用程序/json”，
'Authorization'：'Bearer${access_token}`
},
});
});
};
玩({
玩家立场：玩家，
spotify_uri:'spotify:track:7xGfFoTpQ2E7fRF5lN10tr'，
});
});
//连接到预先创建的播放器，这相当于
//创建可供Spotify Connect查看的新设备
player.connect（）；
};

非常感谢您的帮助@David。这对我不起作用，但我想我已经很接近了
页面已加载，但为空。我用我的访问令牌替换了您的访问令牌。我没有提供设备id，因为文档中说明，如果没有提供，它将在任何激活的设备上播放
在控制台中，我收到一个403错误（禁止），url为：

当我单击url时，我收到一个401错误，没有提供令牌
你有什么想法
谢谢-greg页面空白是正确的行为。我建议在发布时使用这个片段。所以只需保留

设备id

参数即可。听起来你没有使用我发布的链接来获取令牌，而是使用你自己的软件来检索它。在这种情况下，您需要确保包含以下范围<代码>流媒体，

用户阅读生日

，

用户阅读电子邮件

，

用户阅读私人

。它成功了！非常感谢。你是对的，我需要从你提供的链接中获取令牌。我收到的授权令牌无效。我想，一旦我收到它，我就可以访问我的播放列表、曲目等并提取信息，但可能该令牌只适用于WEB API，而不适用于WEB播放SDK。再次感谢你，就像我说的。你的应用程序收到的令牌应该也能正常工作。你只需确保包含我之前评论中提到的所需范围。我很高兴能帮上忙！你介意接受吗