ReactでSpotify Web Playback SDKを使用する

Question

Spotifyは、ブラウザ、Web Playback SDKでの完全な曲の再生をサポートするベータ版の新機能を備えています。ドキュメントでは、メインHTMLファイルのスクリプトタグを使用してプレーヤーを即座に初期化する例を示しています。これには、スクリプト内ですぐにアクセストークンを設定する必要があります。私の問題は、Reactアプリケーションを作成していることです。ユーザーがSpotifyアカウントにログインするためにボタンをクリックした場合にのみ、プレイヤーを初期化したいと考えています。このイベントが発生したときにのみスクリプトをロードするために、私はreact-load-scriptを使用しています。私が欲しいのは、ユーザーがボタンをクリックしてSpotifyアカウントにログインし、ログインがSpotifyによって認証されると、私のアプリケーションがアクセストークンを受け取り、Web再生スクリプトがロードされ、スクリプトがロードされるとコールバック関数が呼び出されるプレイヤーはアクセストークンを使用して初期化されます。

spotify-playerスクリプトがロードされるまで、Spotifyオブジェクトが存在しないという問題があります。handleScriptLoadコールバックが実際に呼び出されると、Spotifyオブジェクトが定義されますが、コードがコンパイルされるときには、 。誰にもこの問題を回避する方法はありますか？私のリアクトコンポーネントのrenderメソッドで

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; 
    } 
    }); 
} 

あなたの問題を解決する必要がありますので、定義するオブジェクトを待っていると、問題を解決する必要があります。