Mobile versionIch interagiere mit der Spotify -Web -API/-wiedergabe unter dem Autorisierungscode mit PKCE Flow. Ich habe erfolgreich autoriziert (Aktualisierung meines App -Dashboards und Bereitstellung entsprechender Bereiche). Ich habe auch erfolgreich eine Funktion access_token und refresh_token bekommen. Ich habe mehrere APIs ausprobiert (d. H. Verfügbare Geräte erhalten, erhalten Sie erfolgreich mit dem Titel -Refresh -Token), um nur einige zu nennen. Ich habe zuerst überprüft, ob ich die Instanz des Web -Wiedergabes SDK falsch initialisiert habe oder ob meine Übertragungs -Wiedergabefunktion den Fehler verursacht hat. Zuerst schien es so, als hätte ich es falsch initialisiert, aber wenn ich die Transfer -Wiedergabe sofort einbezogen habe, spielt der Song erfolgreich in meinem Browser (meine Spotify -App spiegelt auch wider, dass der Track auf dem Webplayer spielt). Ich habe dann meine Übertragungswiedergabefunktion getestet, wenn ich bei der Übergabe der Wiedergabe auf ein anderes Gerät (d. H. Mein Desktop oder mein Smartphone) den gleichen Fehler erhalten würde. Die Übertragungswiedergabefunktion funktioniert, aber kein Fehler in der Konsole. Zu diesem Zeitpunkt bin ich verwirrt darüber, was das Problem ist, da ich alles überprüft habe, woran ich denken kann. Ich habe auch versucht zu suchen, ob andere Leute etwas ähnliches oder spezifischer Fehler hatten, aber keine solche Aufzeichnungen (2 Beiträge in den Spotify Dev Community -Foren, ohne nützliche Antworten/Lösungen). Ich habe versucht, ein anderes Gerät zu übertragen (Curdeviceid in meiner TransferPlayback -Funktion auf ein anderes aktives Gerät) und war erfolgreich. Und noch einmal, obwohl ich einen Fehler bekomme, wenn ich die Wiedergabe in meinen Webplayer übertragen habe, wird der Track immer noch erfolgreich abgespielt. Ich habe einen Code aus meinem Kontext ausgelassen (da es so lang ist), aber alle relevanten Informationen enthalten.const transferPlayback = async (curDeviceId) => {
const token = getAccessToken; //Access token received from auth
if (player){
await player.activateElement();
}
const response = await fetch("https://api.spotify.com/v1/me/player", {
method: "PUT",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},
body: JSON.stringify({
device_ids: [curDeviceId],
play: true,
}),
});
const data = await response;
console.log(data);
}
useEffect(() => {
if(!getAccessToken) return;
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: 'DappMyMusicWebPlayer',
getOAuthToken: cb => { cb(getAccessToken); },
volume: 0.5
});
setPlayer(player);
player.addListener('ready', ({ device_id }) => {
console.log('Ready with Device ID', device_id);
setDeviceId(device_id);
setIsPlayerReady(true);
});
player.addListener('not_ready', ({ device_id }) => {
console.log('Device ID has gone offline', device_id);
setIsPlayerReady(false);
});
player.addListener("initialization_error", ({ message }) => {
console.error("Initialization Error:", message);
});
player.addListener("authentication_error", ({ message }) => {
console.error("Authentication Error:", message);
});
player.addListener("account_error", ({ message }) => {
console.error("Account Error:", message);
});
player.addListener("playback_error", ({ message }) => {
console.error("Playback Error:", message);
});
player.connect();
console.log(player);
};
}, [getAccessToken]);
< /code>
WebPlaybackComponent.jsx
import React, { useState, useEffect, useContext } from 'react';
import { DappMyMusicContext } from '../context/DappMyMusicContext';
const WebPlayback = () => {
const {getAccessToken, transferPlayback, isPlayerReady, deviceId} = useContext(DappMyMusicContext);
console.log("isPlayerReady: " + isPlayerReady + "\ndeviceId: " + deviceId);
const checkDevices = async () => {
const token = localStorage.getItem("access_token");
const response = await fetch("https://api.spotify.com/v1/me/player/devices", {
method: "GET",
headers: {
"Authorization": `Bearer ${token}`
}
});
const data = await response.json();
console.log("
Available Devices:", data);};
const checkCurrentDevice = async () => {
const token = localStorage.getItem("access_token");
const response = await fetch("https://api.spotify.com/v1/me/player", {
method: "GET",
headers: {
"Authorization": `Bearer ${token}`,
},
});
const data = await response;
console.log("Current playback device:", data);
};
return (
transferPlayback(deviceId)}>Play
List of Devices
Current Device
);
}
export default WebPlayback;
< /code>
Ich habe verschiedene Ansätze ausprobiert und entwirft, wenn die Spotify -Web -Wiedergabe -Funktion in meiner Webanwendung implementiert wird. Ich habe auch versucht, diesen Fehler oder andere Fehler bei der Implementierung eines Webplayers zu suchen, fand aber nichts relevantes für mein Dilemma.
