Commusic
Description:
Our project is a communal music playlist that is easy to contribute to and manage. The target audience is residents of a dorm or apartment style group living space, as our project allows for an entire community to contribute to a musical ambience. We created a input website that allows any user to contribute from his/her own device, and an output website to be loaded on the public monitor/music playing device. Users submit youtube links to be played, and can see a live-updating queue of the group's music submissions.
Inspiration:
We both explore a wide range of music genres with our roommates, and regularly listen to songs together while studying or hanging out in our rooms. This inspired us to make a platform that will easily allow everyone in the group housing to contribute their song tastes to the playlist, so that we can discover each other's music.
What it does:
Our project connects two pages, the input and output, that can either be hosted or run directly as a file. The backend is the code that connects the input and output and stores the queue, and needs to be run on a computer that is accessible by both input and output. Videos are added to the queue by means of submitting a YouTube ID, which the output uses to find the correct YouTube video to play in a large screen format. Multiple instances of the outputs and inputs can run at the same time, all connecting to one backend, although running multiple instances of the output side will achieve potentially counterintuitive results.
How we built it:
We created a GitHub repository for the project, and practiced good standards of shared code. We coded in the GitHub Sublime Merge. First we worked on the input, created the barebones of the backend and connected the output, then worked on fleshing out the output features, polishing the UI of the input, and adding more features to the backend. We used vectr for the vector graphic logo.
Challenges we ran into:
The limitations and historically changing nature of the YouTube embedded API made it hard to develop the idea exactly as we imagined it. There is a lot of old documentation on the YouTube API that no longer applies. There was no way for us to force the video into full screen, and many YouTube videos have changed their permissions to not be embeddable.
Accomplishments that we're proud of:
We are proud of how well we collaborated on this project, as each of us played to his strengths and simultaneously teaching the other. Additionally, we're proud of how we figured out the connections between the input, output, and the backend. Isaac is especially proud of the UI design of the input, as he's never tried to polish a web page to this degree.
What we learned:
Isaac had never used JavaScript, so he got to quickly pick up JavaScript syntax, and learned to integrate it with his HTML experience. Garrison got to practice his eye for design, and picked up many helpful techniques in Vue.js.
What's next:
Up next is actually setting this up in our rooms, then adding a password feature to keep strangers from messing with the queue if they manage to find the page. We could also work on the ease of deployment, and work on cutting down on the steps necessary for others to set it up.
Built with:
We built the input and output in HTML with JavaScript functions, and used Java Springboot for the backend. The YouTube API allowed us to embed a video player in the output window. We used Vue.js and Axios while integrating the JavaScript of the input and output, and the Java of the backend.
Prizes we're going for:
$100 Amazon Gift Cards
Raspberry Pis & PiHut Essential Kits
Grand Prize
Jetbrains Pro Software
Lutron Caseta Wireless Kit