Having iframes for every feature and having that feature load their own JS and CSS might have worked well for the desktop application, which the user downloads bundled with all the resources that it needs.

The architecture of the web player was ideal for consistency between platforms, and fit how the company was organized in feature teams. Thus, the team working on the Playlist view would implement a new feature, and make it available on the desktop application and the web player, without having to care about the underlying infrastructure. In addition, the code for the views was identical on both desktop and web player. The views were isolated from each other using iframes, and this allowed the teams to iterate on and release them without interfering with the rest of the application. The architecture of the web player followed the same approach as the desktop application. It made it possible for users to play music from Spotify as quickly as possible, without needing to download and install any application. Spotify’s web player was released in 2012 and complemented the experience on desktop devices. Check all the available options here.A web app within the desktop application showing a third party integration – from Felipe Ribeiro’s talk about Javascript Spotify at JSConf Iceland 2016 You can customize the UI with a styles prop. This library doesn't handle token generation and expiration.

Please refer to Spotify's Web API docs for more information. If you want to show the Favorite button ( 💚) you'll need the additional scopes: user-modify-playback-state (to update other devices).user-read-playback-state (to read other devices' status).It needs a Spotify token with the following scopes: This works in addition to the showSaveIcon prop and it is only needed if you keep the track saved status in your app. Provide you with a function to sync the track saved status in the player. UpdateSavedStatus (fn: (status: boolean) => any) => any The time in seconds that the player will sync with external devices SyncExternalDeviceInterval number default: 5 If there are no URIs and an external device is playing, use the external player context. Needs additional scopes in your token!Ĭustomize the player appearance. The position of the list/tracks you want to start the player.ĭisplay a Favorite button.

Spotify web playter