SpotifyAPI添加项目播放队列502发生错误

Question

为了实现在曲目播放结束后立即播放下一首歌曲的功能，我尝试使用spotifyAPI的"将项目添加到播放队列"。

// WebPlayback.tsx
import { useEffect, useState } from 'react';
import Player from './pages/Player';
import { PlayerContext } from './PlayerContext';
import getTokens from './utils/functions/getTokens';
export interface IPlayerContext {
player: Spotify.Player | null;
deviceId: string;
}
function WebPlayback() {
const [player, setPlayer] = useState<Spotify.Player | null>(null);
const [deviceId, setDeviceId] = useState('');
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://sdk.scdn.co/spotify-player.js';
script.async = true;
document.body.appendChild(script);
window.onSpotifyWebPlaybackSDKReady = () => {
const player = new window.Spotify.Player({
name: 'Mucketlist Player SDK',
getOAuthToken: (cb) => {
cb(getTokens());
},
volume: 0.5,
});
setPlayer(player);
player.addListener('ready', ({ device_id }) => {
console.log('Ready with Device ID', device_id);
setDeviceId(device_id);
});
player.addListener('not_ready', ({ device_id }) => {
console.log('Device ID has gone offline', device_id);
});
player.connect();
};
}, []);
return (
<PlayerContext.Provider value={{ player, deviceId }}>
<Player />
</PlayerContext.Provider>
);
}
export default WebPlayback;

// Player.tsx
function Player({ tracks }: PlayerState) {
const playerState = useContext(PlayerContext);
useEffect(() => {
if (!playerState.deviceId) return;
if (!(Array.isArray(tracks) && tracks.length === 0)) {
addItemPlaybackQueue();
}
}, [playerState.deviceId]);
const addItemPlaybackQueue = async () => {
const newQueue = 'spotify:track:4DmBVImaIhE3RyNvbtZTTz';
const response = await axios.post(
`https://api.spotify.com/v1/me/player/queue?uri=${newQueue}&device_id=${playerState.deviceId}`,
{},
{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${getTokens()}`,
},
}
);
console.log(response);
};
return (
<PlayerWrap>
<button onClick={isPlay ? onPause : onPlay}>
{isPlay ? 'pause' : 'play'}
</button>
<div>
{!isShowVolumeMixer ? null : (
<input
type="range"
min="0"
max="1"
step="0.1"
value={currentVolume}
onChange={handleVolume}
/>
)}
<VolumeButton
onClick={() => setIsShowVolumeMixer((prevState) => !prevState)}
>
Volume
</VolumeButton>
</div>
<button onClick={onPreviousTrack}>previousTrack</button>
<button onClick={onNextTrack}>nextTrack</button>
<button onClick={getState}>getState</button>
</PlayerWrap>
);
}
const mapStateToProps = (state: PlayerState) => {
return {
tracks: state.tracks,
};
};
export default connect(mapStateToProps)(Player);

然而，我得到以下错误：

POST https://api.spotify.com/v1/me/player/queue?uri=spotify:track:4DmBVImaIhE3RyNvbtZTTz&device_id=94867997ce023ed6effe8662c5ca6236ab30963a 502
Uncaught (in promise) AxiosError {message: 'Request failed with status code 502', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}

我检查了给定的查询(uri，device_id(是否正确输入，accessToken也添加到了头中，但出现了错误。这是令人沮丧的，因为在spotifyAPI官方文档或社区中没有相关内容。

有什么办法解决这个问题吗？或者还有其他方法可以将曲目放入播放队列吗？

Answer 1

我在听"player_state_changed"时遇到了同样的问题，并立即采取了行动。由于某些原因，当音轨结束时，API似乎在很短的一段时间内无法回答调用。

axios重试对我来说很有魅力：

import axiosRetry from 'axios-retry';
axiosRetry(axios, { retries: 10 });

如果你不想使用外部库，你可以尝试在你的代码中包含睡眠(未测试(：

setTimeout(() => {
do your addItemPlaybackQueue
}, "2000");