Spotify Player SDK的反应

问题描述

我正在尝试在我的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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）