React와 함께 Spotify Web Playback SDK 사용

Question

Spotify는 브라우저, 웹 재생 SDK에서 전체 노래 재생을 지원하는 베타 버전의 새로운 기능을 제공합니다. 설명서에는 기본 HTML 파일에서 스크립트 태그를 사용하여 플레이어를 즉시 초기화하는 예제가 나와 있습니다. 이를 위해서는 스크립트에서 즉시 액세스 토큰을 설정해야합니다. 내 문제는 React 앱을 만드는 중이며 사용자가 버튼을 클릭하여 Spotify 계정에 로그인하는 경우에만 플레이어를 초기화하려는 것입니다. 이 이벤트가 발생했을 때만 스크립트를로드하려면 react-load-script를 사용하고 있습니다. 원하는 흐름 : 사용자가 Spotify 계정에 로그인하기 위해 버튼을 클릭하고, 일단 Spotify에서 로그인이 인증되면 액세스 토큰을 받으면 웹 재생 스크립트가로드되고, 스크립트가로드되면 콜백 함수가 호출됩니다. 플레이어는 액세스 토큰을 사용하여 초기화됩니다.

문제는 spotify-player 스크립트가로드 될 때까지 Spotify 객체가 존재하지 않는다는 것입니다. handleScriptLoad 콜백이 실제로 호출되면 Spotify 객체가 정의되지만 코드가 컴파일 될 때 . 누구든지이 문제를 해결할 수있는 아이디어가 있습니까? 내 반작용 구성 요소의 렌더링 방법에

import Script from 'react-load-script' 

... 

handleScriptLoad =() => { 
const token = this.props.tokens.access 
const player = new Spotify.Player({  // Spotify is not defined until 
    name: 'Spotify Web Player',   // the script is loaded in 
    getOAuthToken: cb => { cb(token) } 
}) 

player.connect() 
} 

... 

: 관련에서

코드 샘플은 구성 요소에 반응

<Script 
    url="https://sdk.scdn.co/spotify-player.js" 
    onError={this.handleScriptError} 
    onLoad={this.handleScriptLoad} 
/> 

Answer 1

이론적으로는 가능하다.

Web Playback SDK은 외부 스크립트를 통해 window.Spotify 개체를 SDK에 비동기 적으로로드합니다. 따라서 객체가 정의 될 때까지 기다리면 문제가 해결됩니다.

handleScriptLoad =() => { 
    return new Promise(resolve => { 
    if (window.Spotify) { 
     resolve(); 
    } else { 
     window.onSpotifyWebPlaybackSDKReady = resolve; 
    } 
    }); 
} 

그러면 문제가 해결됩니다.