javascript - 将 Spotify Web Playback SDK 与 React 结合使用

Question

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

问题是在加载 spotify-player 脚本之前，Spotify 对象不存在。当实际调用 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;
    }
  });
}

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