Spotify Player Across Tabs

[IkeHunter]

Info

The Problem

When multiple tabs are opened, the spotify web player will instantiate a new instance each time per tab. Furthermore, these different instances cannot communicate with each other. This is an issue when the admin plays something from the dashboard, and wants to pull up a board showing the currently playing track.

Possible Solutions

• Use a service worker to keep track of open tab, communicate between tabs, or store state
• Use the js Broadcast API to let playing tab pass data to other tabs
• Pop up a smaller window that handles the web player instance (separating it from the admin/boards/etc), this window will pass events to all open tabs via some browser api

Considerations

• Cannot play audio from js service worker (so cannot instantiate web player api in sw)
• The player must be playing from one tab. The browser only allows audio to play from tabs & spotify only allows one audio source to be playing the music
• If the admin plays the music from the admin dashboard, then the player will be associated with that tab. If the admin closes that tab, but has others open, the audio will stop and the player will disconnect. Maybe this could be solved using the beforeunload event in js? How to block users from closing a window in Javascript?
• Due to the behavior of the web player being in one tab at a time, the app needs to be aware if it's tab is a "leader" or a "follower" instance. If leader, will create web player instance, otherwise, will just use event data (sw, broadcast, etc) to keep track of player progress and events.
• Before spotify is passed to the browser to start playing, there is technically no web player, but a lead tab should still be ready to accept spotify transfer

Task

Requirements:

• The app should only have one web player
• New tabs don't create new web players, but reference original player
• Leader/follower tabs should all be able to display/control playback
• When transferring playback in spotify, only one instance of "Jukebox Player" should be listed in devices, despite multiple tabs open
• The admin should be aware of which tab is playing, and should be notified before closing that tab