Inspiration

What inspired us to create Freebox was the limitations in how people share music with other people. We found that other services like Spotify and Google have created music players that could sync with the devices within the room; however, there were few services that allowed multiple people at different distances to listen to music at the same time. Discord had a similar feature through their music bots such as "Rhythm" and "Watora," but I found their use case very limiting due to the inability to share people's own music files or use other messaging apps outside of Discord. Thus, we wanted to make a web application that could focus on letting everyone share the same music at the same moment separated from social media apps. We also wanted to have a separate application for those who wanted to study with music, but didn't want to stray away from listening to music with a group of people.

What it does

The project we have created hasn't been flushed out fully due to the time constraints and limited experience in the coding language to make the app. At its core, the app can synchronize music provided by the user to numerous other clients / browsers within or outside the user's network. The user can play, pause, or seek through the track provided and update that progress to other clients connected to the user. Theoretically, the music could be shared with more than 10 people provided that the internet connection and the latency is low enough.

How we built it

We built this implementation using mostly front end languages such as HTML, Javascript, and Node.JS. HTML and Javascript handled most of the user interface and provided the user's music controls and client connection tools, while Node.JS provided the synchronization information to all clients connected to the Node.JS server. For each client, they connect to the Node.JS server via an IP address and sends WebSockets to the server to indicate the music's progress. In turn, Node.JS broadcasts that information to the other clients connected, mostly ensuring that the other clients also get the same place in the music.

Challenges we ran into

We ran into many challenges procuring the tools we needed to implement the features of Freebox. We initially wanted users to upload their own files so that it would be sent to Amazon's S3 storage server, but ended up finding that POST requests made the process arduously difficult. In addition, we struggled to implement the communication between clients to update the music's progress until we found that WebSockets were suitable for synchronizing the music. Even then, we found that broadcasting WebSockets to all clients would sometimes recursively control the player, which we had to mitigate. In the end, even after countless hours of research, there was many resources, but there was not enough information to consider towards making this project the best it could be.

Accomplishments that we're proud of

The accomplishment that we are proud of is seeing how the implementation of our web application synced across multiple devices. One of the biggest issues of synchronizing music among the clients was how the clients would communicate to each other. Though the implementation of WebSockets and instructions on how to control the music player in the website, we were able to develop a method to send information about the song's progress to multiple people. We tried it with 4 devices so far and saw that all devices responded to the change in music controls with very little latency. Seeing all of the devices being controlled at the same time was the biggest achievement that we can be proud of.

What we learned

From this project, we learned that it is important to focus on small features initially and to not think about bigger features to implement. Looking back at the project, it was obvious that had we implemented the music synchronization first, we would have more time to implement more features into the project. Thus, it is important to not become overwhelmed with the features to implement and instead plan out what features to implement, even if there needs to be research on the language to develop the idea.

What's next for Freebox

Freebox has many improvements that could make the web application more advanced in providing music to a group of people. Of many implementations that we could add, one of the most critical features that we plan on adding is the uploading of music files from each user so that everyone can share the fun (and sometimes awkwardly humorous) music that they have or have created. The server would be able to queue these files in a playlist, which would also be a welcome addition to Freebox. Finally, we would like to incorporate user logins so people can save the playlist of music to be played at another time. While it would be challenging, we believe that users shouldn't have to reupload their files just so other people can enjoy the music that is shared, so having accounts would help reduce the time to upload.

Share this project:

Updates