使用Spotify Web播放SDK与React

Question

Spotify 在浏览器中支持全曲播放的新功能，Web Playback SDK 已经进入 beta 版。文档提供了一个示例，在主 HTML 文件中使用 script 标签立即初始化播放器。这需要在脚本中立即设置访问令牌。我的问题是，我正在创建一个 React 应用程序，我只想在用户点击登录他们的 Spotify 帐户按钮时才初始化播放器。为了只在此事件发生一次加载脚本，我使用 react-load-script。我想要的流程是：用户点击登录他们的 Spotify 帐户按钮，一旦他们的登录由 Spotify 验证，我的应用程序接收到访问令牌，然后加载 web 播放脚本，一旦脚本加载完成就调用回调函数，并使用访问令牌初始化播放器。

问题在于 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组件的render方法中：

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

- bitwitch

---

可能是如何从异步调用中返回响应？的重复问题。 - Liam

Answer 1

理论上来说，这是可能的。 Web Playback SDK会通过外部脚本异步加载window.Spotify对象到我们的SDK中。因此，等待该对象被定义应该可以解决问题。

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

那应该解决你的问题。

- Bilawal Hameed

---

谢谢Bilawal Hameed！我实际上通过将播放器定义为window.Spotify.Player而不是Spotify.Player来解决了这个问题。这有效地忽略了在脚本加载并运行handleScriptLoad函数之前window.Spotify未定义的情况。 - bitwitch

有趣。这不会抛出错误吗？因为 window.Spotify 会是 undefined，而你正在尝试调用它的方法？ - Bilawal Hameed

它不会抛出错误。显然，在编译时未检查Player方法，因此最初Spotify未定义也无关紧要。 - bitwitch

SDK 定义了 window.Spotify.Player，因此每当我们调用 Spotify.Player 时，它会尝试在本地和全局查找。一旦 SDK 加载完成，它将在全局范围内定义。这两者应该是同义词，除非您在本地覆盖了它。 - Bilawal Hameed

我同意，但由于某种原因，当它被定义为Spotify.Player时，它无法编译，但当它被定义为window.Spotify.Player时，它可以正常工作。我唯一的猜测是，在编译时它没有检查Player实际上是Spotify上的一个方法，只检查Spotify是一个有效的对象。无论如何，最终我使用了你提出的解决方案，因为它更健壮，而且我真正理解它，感谢你的帮助。 - bitwitch

这很有道理！通常最好像你所做的那样只指定 window.Spotify.Player。很高兴你觉得它有用！如果你有任何其他问题，请随时联系我，我在 Spotify 工作 :) - Bilawal Hameed