Music Machine

Is the impracticality of carrying your piano everywhere stopping you from flaunting your inner Mozart?! Fear NOT! Because Music Machine is here to your rescue. Composing songs has never been easier!

Comment

Inspiration

I took a piano class my junior year and I remembered not being able to practice the music I learnt because carrying my keyboard around was not only impractical, but also physically impossible for me [my little toe still has a scar from where I dropped it on my foot once while trying :( ] So, when I learnt that we are having a musical themed hackathon, I decided to make myself a keyboard that I can carry wherever I go! And so, the Music machine came into existence. If you would like to try it, go to the link and you can use your mouse to click on keys or your keyboard keys to play music! :D

What it does

Music Machine allows users to play Piano from the comfort of their 'keyboard'. Users can click on the Piano keys displayed on the screen or press the alphabet keys on their computer to play a tune. Each laptop key is mapped to a specific Piano key. Users can also play back the tune they just made and if they like it, save it to the database. Users can then share the link of their tune with their friends and family! If they want to re-record themselves, they can get back and start all over again.

How I built it

I started with building a simple piano model in HTML and CSS and added the music tunes by using Javascript to map keys. That was the easy part of the project. After I was done with that, I slowly started to scale up the project by adding features one by one to ensure that I have a good product to demo. I used Express JS and Mongo DB to create the backend of the project. After that, I decided to move the database from my local machine to the cloud by using Google Cloud services.

Challenges I ran into

The biggest challenge was trying to understand how to work with Express JS and Mongo DB. This was my first time with both of those so I had to watch a lot of tutorials on how things work. The biggest challenge was getting my Mongo DB online. After a successful run on my local machine, I hoped for an easy way forward... after all, I already did the hard part of setting up the database. Now all I needed was an online link to the database and I am all set. I was mistaken. I spent the last 6 hours reading tutorials after tutorials to figure out where I was messing up and it was this- "+srv:" I needed to add this tiny bit of code after 'mongodb' to get my url working. It took me 6 hours but by the end of it, I had moved my database online and honestly, I think it was worth wrecking my sleep schedule over. Also, another challenge that I faced was the distinct lack of single piano notes online. I watched so many videos and everyone of them played Do-Re-Mi but not separately... It was all together. So I had to patiently play every single note, record it, cut it, give up (and play with my dog) and then come back to continue the cycle. I planned on having 3 Octaves but for my sanity, I decided to go with 2 instead :P

Accomplishments that I'm proud of

I am so happy that I was able to finally get my database working and was successful in moving everything from my local machine to the cloud. Also, found a bug with Google's App Engine Flexible app deployment. Spent another hour finding solution. Apparently, it is an on going issue. But thanks to page 3 result of Stack overflow, I was able to manage a work around and finally get my site up!! (you know you're desperate for a solution when you look beyond the page 2 of google search page ) This is also my first time actually sticking through the entirety of a hackathon and have a finished and working project to show and I am actually very proud of that. I have been to hackathons before but never really submitted my unfinished projects because I figured what's the point if it's not done. But this time I wanted to not give up at the end and just submit whatever I have. Luckily, by not giving up, I actually managed to finish a working project that I am so happy to demo! :D Can't wait to have my 'I Demoed' sticker!!

What I learned

I learned a lot about the working of Google Cloud SDK and Mongo DB. I was familiar with Javascript but Express was a new territory and I am glad I decided to pick it up. Honestly, I am a lot more comfortable with handling databases and cloud storage than I was before and I am really thankful for that because I think I can really have that on my resume now and be able to talk about it in the interviews!

What's next for Music Machine

I would like to add more instruments to the machine. Perhaps a feature that will allow users to switch between different instruments while composing. Also, after this weekend, I will be focusing on allowing users to create a personal account on Music machine in which they can store their melodies and can come back to. I would also like to add in some social media buttons for easy sharing! :)

Share this project:

Updates