通过spotify web api和javascript播放歌曲时出现问题
我正在构建一个与spotify接口的基于web的应用程序。我从C#开始，访问这个应用程序接口没有任何问题，从我的播放列表中拉出曲目，但似乎你不能使用位于以下位置的spotify Web API播放歌曲：
https://developer.spotify.com/documentation/web-api/
然后，我开始查看位于以下位置的Web播放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
Stack Overflow用户
发布于 2018-10-19 03:44:05
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
};这意味着无需等待Spotify Web Playback SDK加载，就可以立即调用play。正如评论所说，只要调用onSpotifyWebPlaybackSDKReady，就可以使用Spotify.Player。
另一个问题是，你实际上从未创建过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设备。
下面的代码片段将播放这首歌。
警告:这将在没有任何控件元素的浏览器中播放音乐！
这段代码需要一个访问令牌，可以通过单击绿色按钮Get Your Web Playback SDK Access Token获得访问令牌。然后，需要将令牌复制粘贴到替换<YOUR_ACCESS_TOKEN_HERE>的代码片段的第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>https://stackoverflow.com/questions/52880305
复制相似问题