How to load Spotify Web Playback SDK inside an Angular App?
This post guides you about loading the Spotify Web Playback SDK in a straightforward way inside an Angular Application. Although Spotify provides the general steps to load Web Playback SDK, it is a bit of challenge to figure out how to load the SDK in an Angular application. There are more elegant ways to do this, but I think this one is one of the simplest ones. If you’re interested in the code, feel free to jump straight to the resources section.
Context of the scenario:
Let’s say we want to use the Spotify Web Playback SDK inside a player component in an angular application. The player component gets activated when we click on the player link in the navigation as described in figure 1. We will initialize the SDK player inside the ngOnInit() lifecycle hook of the player component. That means create and connect Spotify SDK player when the player component is initialized.
Step-by-step procedure:
- Add onSpotifyWebPlaybackSDKReady event listener to the window object: when a Spotify Player is loaded and ready, it calls this function.
- You need to access the window object as (<any>window) inside an Angular component class to ensure that the callback is registered successfully.
- Since we need the access to variables defined in our component class inside the callback function, we will also bind (this) argument.
2. Dynamically add a <script> element: Spotify Player ( from https://sdk.scdn.co/spotify-player.js )
- We’re dynamically creating and adding a <script> element. Specifically, we’re appending the dynamically created <script> element to the <head> element.
- Since we need to know when this completes, we are wrapping this inside a JavaScript Promise.
3. Create a Player:
- We create a new Spotify player by using the Spotify object, which is available once the SDK in step 2 is loaded.
- When creating a player, we need to pass an authentication token, which you can get in two ways: Manually create from Spotify Developer Dashboard OR Request while initializing your application.
- Assign callback functions for different player events.
- We assign the functions defined in the player component class as callbacks, and bind this variable to access the local variables (those defined in the player component class)
4. Connect the Player:
- By calling connect() on newly created Player object. It connects the Player object with Spotify Connect. The newly created player is now ready to play songs.
How to verify that the Player is created successfully?
- Check if it is listed in the available devices in your other Spotify clients: Spotify Web Player, Spotify Desktop Application, Spotify Mobile Application
- log the device in the ready() event listener of the Spotify Web SDK player
