Project deployed at: https://spotishare-test.herokuapp.com/
An online real-time listening party! Using Spotify's API and Spotify's Web Player SDK this web app acts as a Spotify app instance and music is played straight from the tab on your browser.
To use the app, a user must have Spotify Premium, as it is a requirement to use the web player SDK.
On the home page, the notice for requiring premium is displayed to the user. When the create lobby button or sign in button is clicked, they are redirected to Spotify's sign in page.
Screen once user is signed in.
This is the pre-lobby screen. This is displayed when a user clicks on an invite link from a friend, or when they initially create the lobby. A confirmation button and room code are both displayed to make sure they are in the right place.
This is the actual listening party! This is the initial state when a user joins, letting the user know nothing is playing, yet. A dropdown in the chat section on the right side lets them know how many people are currently in the party. The chat is handled by the backend using node.js and socket.io. When a message is sent, it is emitted to all clients connected and displayed into the chat area on the UI. With this feature new members joining in cannot see previous chat logs.
This is the search bar where you can look for songs. Songs are retrieved from a Spotify API request, and displayed in a list for a user to browse and choose which song they want to add to the queue.
Once a song is added into the queue, it automatically begins. The queue shows details about the song, as well as who added it into the queue. In the web player, the album cover, song name, artist and volume control are displayed to all users, while the play/pause, rewind, and seek forward controls are only visible to the host.
Using the web player's "player_state_changed" event, each client is frequently checked to see if its position in the current song is within at most 3 seconds difference with the host's position. If it is not, then the client's song position will be brought up or down to the host's position and re-synced.