Spotify has a new feature in beta supporting full song playback in browser, Web Playback SDK. The documentation shows an example of immediately initializing a player using script tags in the main HTML file. This requires an access token to be set immediately in the script. My issue is that I am creating a React app and I only want to initialize a player if a user clicks a button to login to their Spotify account. In order to load in a script only once this event occurs, I am using react-load-script. The flow I want is: a user clicks a button to login to their Spotify account, once their login is authenticated by Spotify my app receives an access token, the web playback script is then loaded, once the script is loaded a callback function is called and the player is initialized using the access token.
The problem is that the Spotify object does not exist until the spotify-player script has been loaded in. When the handleScriptLoad callback is actually invoked, the Spotify object is defined, but when the code is being compiled, it is not. Does anyone have any ideas how to get around this problem?
Code sample from the relevant React component:
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()
}
...
in my React component's render method:
<Script
url="https://sdk.scdn.co/spotify-player.js"
onError={this.handleScriptError}
onLoad={this.handleScriptLoad}
/>
Add the App Remote SDKUnzip the App Remote SDK zip file that you downloaded. Add the library to your project by importing it as a module. In the “Project” side bar in Android Studio (View –> Tool Windows –> Project), right click your project's root folder and navigate to “New” –> “Module”.
Starting playback The namesake feature of our Player API is the /v1/me/player/play endpoint — your tool for beginning or continuing the playback of music or podcasts on Spotify. It's more powerful than the play button that you see in Spotify's mobile app.
The Spotify SDK allows your application to interact with the Spotify app running in the background as a service. The capabilities of this API include getting metadata for the currently playing track and context, issuing basic playback commands and initiating playback of tracks.
In theory, it is possible.
The Web Playback SDK will asynchronously load the window.Spotify
object in our SDK via an external script. So, waiting for the object to be defined should solve the problem:
handleScriptLoad = () => {
return new Promise(resolve => {
if (window.Spotify) {
resolve();
} else {
window.onSpotifyWebPlaybackSDKReady = resolve;
}
});
}
That should solve your problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With