将 Spotify Web Playback SDK 与 React 结合使用

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 将通过外部脚本在我们的 SDK 中异步加载 window.Spotify 对象。所以，等待对象被定义应该可以解决问题：

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

这应该可以解决您的问题。