-
-
Blahaj having the time of his life
-
Our logo
Inspiration 🦈🍉🎺🎷🎸🎻🎹
We really like Blahaj. No, in fact, we love Blahaj. Although some of our members were new to MLH and Blahaj, they still love him, too. We are all members of Blahaj Gang and we wanted to incorporate Blahaj into our hack this weekend. Also, we really like virtual instrument websites so we wanted to make our own. The fusion of these two ideas brought us Blahaj's Steel Drum Corner.
What it does 🎹🎶
Blahaj's Steel Drum Corner is a site where you can make Blahaj play the Steel Drums while enjoying a nice sunset on the beach. Press Q-[ on the first row (of a QWERTY keyboard), and A-J on the second row to play a series of different notes.
How we built it 🔧
We used the holy trinity - HTML, CSS and Javascript - to make our project this weekend. We also used some tools in the Adobe Creative Suite to design our website. Lastly, we used some online music tools to help us pitch a steel drum sample up and down to make different notes.
Challenges we ran into 💀🏃♂️🏃♂️🏃♂️🏃♂️
Music Mayhem 🎵
We're all music newbies, and there weren't any resources online that had a list of Steel Drum notes. The only thing we found were samples of a single note. So, we reached out to a bunch of music nerds and friends, who still didn't reply. Luckily, some of us learned a little bit of music theory to learn about generating new notes from a sample, and eventually, we got 19 notes.
Animations in Javascript 🎨
We've all used Javascript to some extent before. Some of us had only used it for small checks in webapps, and some had used it on complex sites. However, animating and changing images in Javascript was something none of us had ever done before. We ended up following a couple of tutorials on a few websites to help us animate Blahaj striking the drum, and it turned out really well!
Keypresses 🔑
Adding events on the press of a key was really annoying because we kept facing problems. However, after a long session of debugging and several cups of coffee, we managed to make it work, and make it work well.
Accomplishments that we're proud of 🏅🏆
Our Design
We all really like how our designs have come out, from the background to the keys to the sign. We think all the elements of the design really compliment everything else really well and we're really happy with that.
Overcoming our Challenges
We faced a lot of challenges that were either difficult, infuriating, or both. Despite this, we still ended up with a really cool project that works, and a cute Blahaj wearing a head lei.
What we learned
Music Theory and Music Software
As mentioned above, we learnt a little bit of music theory and a little bit of how music software works. Sampling is really cool, and we all hear samples in a lot of songs, but sampling an instrument yourself is really hard. Thus, we had to learn some music theory (at a hackathon of all places!) to finish our hack.
Various Javascript Things
Javascript was a huge part of our project and it was a language that we explored much deeper than ever before. We learned about animations, key events, functions and a lot of syntax.
What's next for Blahaj's Steel Drum Corner ⏭⏭⏭
We really want to add a recording feature where people can record their compositions, and set out to do so at the beginning of the hackathon. Sadly, due to time constraints and inexperience with implementing anything like this, we couldn't make this feature a reality. However, we would still really like to after this hackathon.
Log in or sign up for Devpost to join the conversation.