在 React 中使用 Spotify Web Playback SDK

Question

Spotify 在测试版中有一项新功能，支持在浏览器中播放完整歌曲，即 Web Playback SDK。该文档显示了使用主 HTML 文件中的脚本标签立即初始化播放器的示例。这需要立即在脚本中设置访问令牌。我的问题是我正在创建一个 React 应用程序，如果用户单击按钮登录到他们的 Spotify 帐户，我只想初始化一个播放器。为了仅在发生此事件时才加载脚本，我使用了 react-load-script。我想要的流程是：用户单击按钮登录他们的 Spotify 帐户，一旦他们的登录通过 Spotify 的身份验证，我的应用程序就会收到一个访问令牌，然后加载网络播放脚本，一旦加载脚本，就会调用回调函数并且播放器使用访问令牌进行初始化。

问题是Spotify对象直到加载了spotify-player脚本才存在。当实际调用handleScriptLoad回调时，定义了Spotify对象，但是在编译代码时却没有。有没有人有任何想法如何解决这个问题？

来自相关 React 组件的代码示例：

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

...

在我的 React 组件的渲染方法中：

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

Answer 1

理论上是有可能的。

Web Playback SDK将通过外部脚本异步加载window.SpotifySDK 中的对象。因此，等待对象被定义应该可以解决问题：

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

那应该可以解决你的问题。