Bachgle

• 

  Bachgle - Main View

Inspiration

The inspiration was simple: let's make something fun! This was Simon's first time doing web development in any real fashion, so we also thought it best to keep the code relatively simple. To compensate for the simple tech, we pursued a very vivid concept: Bachgle.

What it does

Bachgle allows one to hear Bach’s two-part inventions performed a cappella by beagles!

How we built it

Bachgle is built primarily with React & the Tone.js Web Audio framework.

After parsing Bach-encoded MIDI data (MIDI being a standard used for musical information) into JSON, Tone.js is utilized to interpret the now-JSON musical data for real-time generation of music in the browser (there's no audio recordings, only JSON data representing musical notes served one-after-the-other by JavaScript). What’s more, Tone.js allows for use of a custom sound source: enter our friend, the beagle! We downloaded, chopped up, and cleaned up the bark of a beagle to serve as the sound sample for realizing the JSON musical note data. With just the click of a button, you can hear the music of the timeless composer sung by the breed-of-the-hour.

Challenges we ran into

This was Zane's first time using React & Tone.js, which came with the difficulties and setbacks of picking up new technology on-the-fly. Tone.js has documentation that is not conducive to immediate application in one's code, so having to figure it out was troublesome and time-consuming. Lastly, trying to implement the back-end for a React-based site specifically proved to be too costly in terms of time due to our inexperience with deploying a React-based site, so we ultimately abandoned the idea of live hosting.

Accomplishments that we're proud of

We had one goal: to make dogs sing Bach via MIDI. We're proud that we were able to accomplish this goal with complete success!

Within the development process itself, we were able to split up the tasks of the project's development in a healthy way despite the web development-specific experience gap between us two. I think it demonstrated a sort of empathy and focus on the team aspect ultimately; we made sure that we both felt involved and like we had something to genuinely contribute at each moment.

Finally, this was both mine and Simon's first-ever hackathon. We're proud to have participated in our first, and are greatly looking forward to the next!

What we learned

What we learned most of all was how to use our respective new-fangled technologies: React, Tone.js, and CSS primarily! That was enough to keep us occupied the entire hackathon, just about.

I'd say another thing we've learned is that a little project can have a big impact if its concept is truly vivid. Bachgle has put a smile on the face of each & every person that we've shown it to! It's truly the best response that we could ask for.

What's next for Bachgle

We had so many ideas that would have been fantastic implementations, but we had to limit our scope due to the time limit! First thing's first, we want to get Bachgle live on the web, then add additional features like the ability for the user to upload & hear their own submitted MIDI files; to have a playable beagle-sounding piano; to have each melodic line be represented visually on the screen in real-time as the MIDI plays... what ISN'T next for Bachgle?

Built With

• css
• react
• tone.js