Spotify 在浏览器中支持全曲播放的新功能,Web Playback SDK 已经进入 beta 版。文档提供了一个示例,在主 HTML 文件中使用 script 标签立即初始化播放器。这需要在脚本中立即设置访问令牌。我的问题是,我正在创建一个 React 应用程序,我只想在用户点击登录他们的 Spotify 帐户按钮时才初始化播放器。为了只在此事件发生一次加载脚本,我使用 react-load-script。我想要的流程是:用户点击登录他们的 Spotify 帐户按钮,一旦他们的登录由 Spotify 验证,我的应用程序接收到访问令牌,然后加载 web 播放脚本,一旦脚本加载完成就调用回调函数,并使用访问令牌初始化播放器。
问题在于 Spotify 对象直到加载 spotify-player 脚本之后才存在。当 handleScriptLoad 回调实际被调用时,Spotify 对象已定义,但编译代码时不存在。有没有人有任何想法来解决这个问题?
下面是相关 React 组件的代码示例:
在我的React组件的render方法中:
问题在于 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}
/>