响应中的 Spotify 播放器 SDK

Question

我正在尝试在我的 react 应用中实现 Spotify 播放器 SDK。但我不知道它给了我一个错误，即 Spotify 未定义。我正在尝试在此上下文文件中的 useEffect 挂钩中实现脚本。

这是我的上下文文件并尝试在其中设置播放器 SDK。提前致谢。

import React,{ createContext, useState,useEffect } from 'react'

import { myPlaylist, fetchAnything } from "../../api-fetching/api-fetching"


// Get the hash of the url
const hash = window.location.hash
.substring(1)
.split("&")
.reduce(function(initial, item) {
    if (item) {
    var parts = item.split("=");
    initial[parts[0]] = decodeURIComponent(parts[1]);
    }
    return initial;
}, {});

window.location.hash = "";

export const MainContext = createContext();

const MainContextProvider = (props) => {
    const authEndPoint = 'https://accounts.spotify.com/authorize?';

    // Replace with your app's client ID, redirect URI and desired scopes
    const clientId = "5c4e46e8acf24w794ru325qi535fw5325hsakf22be91378ff14";
    let redirectUri = "";
    if(process.env.NODE_ENV === "development") {
        redirectUri += "http://localhost:3000/";
    }
    const scopes = [
        "streaming", "user-read-email", "user-read-private",
        "user-read-currently-playing",
        "user-read-playback-state",
        "user-library-read",
        "playlist-read-collaborative",
        "playlist-read-private"
    ];
    
    const [token, setToken] = useState(null);

    const [scriptLoading, setScriptLoading] = useState(true);

    const [currentUser, setCurrentUser] = useState(null);

    const [discover, setDiscover] = useState(null);
    const [discoverPlaylist, setDiscoverPlaylist] = useState(null);
    const [discoverPlaylistTracks, setDiscoverPlaylistTracks] = useState(null);

    const [userPlaylist, setUserPlaylist] = useState(null);
    const [ userPlaylistTracks ,setUserPlaylistTracks] = useState(null);
    
    const [artistInfo, setArtistInfo] = useState(null);

    const [albumTracks, setAlbumTracks] = useState(null);

    const [newReleases, setNewReleases] = useState(null);
    const [newReleasesTracks, setNewReleasesTracks] = useState(null);

    const [searchResult, setSearchResult] = useState(null);
    const [searchValue, setSearchValue] = useState("");

    const [playlistTracks, setPlaylistTracks] = useState(null);



    useEffect(() => {
        let _token = hash.access_token;
        setToken(_token);
        fetchAnything(token, "https://api.spotify.com/v1/me", setCurrentUser);

        if(scriptLoading){
            const script = document.createElement("script");
            script.src = "https://sdk.scdn.co/spotify-player.js";
            script.async = true;
            script.defer = true;
            document.body.appendChild(script);
            setScriptLoading(false);
        }

        window.onSpotifyWebPlaybackSDKReady = () => {
            const player = new Spotify.Player({
              name: 'Web Playback SDK Quick Start Player',
              getOAuthToken: cb => { cb(token); }
            });
          
            // Error handling
            player.addListener('initialization_error', ({ message }) => { console.error(message); });
            player.addListener('authentication_error', ({ message }) => { console.error(message); });
            player.addListener('account_error', ({ message }) => { console.error(message); });
            player.addListener('playback_error', ({ message }) => { console.error(message); });
          
            // Playback status updates
            player.addListener('player_state_changed', state => { console.log(state); });
          
            // Ready
            player.addListener('ready', ({ device_id }) => {
              console.log('Ready with Device ID', device_id);
            });
          
            // Not Ready
            player.addListener('not_ready', ({ device_id }) => {
              console.log('Device ID has gone offline', device_id);
            });
          
            // Connect to the player!
            player.connect();
          };

    }, [token])


    useEffect(() => {
        if(currentUser){
            myPlaylist(token, setUserPlaylist, currentUser.id);
        }

    }, [currentUser, token])


    return (
        <MainContext.Provider 
            value={{ currentUser,playlistTracks, setPlaylistTracks ,searchValue, setSearchValue,searchResult, setSearchResult,newReleasesTracks, setNewReleasesTracks ,newReleases, setNewReleases ,albumTracks, setAlbumTracks,artistInfo, setArtistInfo,discoverPlaylistTracks, setDiscoverPlaylistTracks,userPlaylistTracks, setUserPlaylistTracks, userPlaylist,discoverPlaylist,setDiscoverPlaylist,discover,setDiscover, token,setToken, authEndPoint, clientId, redirectUri, scopes }}>
            {props.children}
        </MainContext.Provider>
    )
}

export default MainContextProvider

Answer 1

您必须通过全局对象引用 Player：

window.onSpotifyWebPlaybackSDKReady = () => {
  const player = new window.Spotify.Player({
    name: "Carly Rae Jepsen Player",
    getOAuthToken: (callback) => {
      callback("access token here");
    },
    volume: 0.5,
  });
};