On October 19, 2013, we hosted an event called the Web Music Hackathon at the Google Japan office. This was the inaugural event organized by Web Music Developers JP, a developer community led by Yamaha's Mr. Kawai, also known as @ryoyakawai (a bit confusing, I know).

Browsers have made remarkable progress in recent years. While the buzzword "HTML5" makes it easy to grasp, the Web Audio API—which allows you to manipulate audio right down to the waveform level—is now available in browsers like Chrome, Safari, and Firefox.

This is a demo created by Keisuke Ai (@aike1000). You can actually tweak each knob and play it just like a full-fledged analog synthesizer. Even more than two years after its release, it still feels as fresh as ever.

It’s definitely amazing! ... But still, don't you feel like something is missing? That's right—if you're going to play with a synth, you want a physical controller rather than a mouse or trackpad. I think everyone shares that thought.

That's where the Web MIDI API comes in: an API that allows sending and receiving MIDI messages directly from the browser. While it hasn't been standardized yet, it is already implemented behind a flag in Chrome and ready to use. In other words, you can now trigger virtual synthesizers running inside Chrome directly from external MIDI hardware.

Hosting the Hackathon #

Once things had come this far, all that was left was to build momentum. Naturally, a hackathon was the first thing that came to mind. With support from AMEI (the Association of Musical Electronics Industry), and musical instruments and speakers generously provided by Yamaha, KORG, and Crimson Technology, around 30 participants gathered together.

I'll leave the detailed account of the event to organizer Mr. Kawai's blog post, and instead share some photos and videos to show just how exciting the event was.

A variety of instruments prepared for this event

"Dontata-kun," seeing the light of day 25 years after development without ever being commercialized. It plays the drums in response to MIDI messages.

Someone even brought their own oscilloscope.

A soldering iron brought along in the heat of the moment.

Demos #

Here are a few projects that particularly stood out to me. (Click the images to jump directly to that part of the video.)

The winner was a project combining TENORI-ON with VJing.

Here’s a slightly unexpected one: a bookmarklet that plays sound effects on mouseover.

Dontata-kun in action.

There were plenty of other creations too, including an electric mokugyo (wooden fish) and a theremin. At about two hours, the video is a bit long, but feel free to skip around and check it out when you have some time.

Finally, some amazing projects from the two tutors.

@komasshu's project plays a snare drum whenever you open your mouth toward the camera.

Industry veteran g200kg created a project that lets you freely build rhythm sequences by placing magnets on a whiteboard.

Since this was our first time running this event, I expected there would be plenty of challenges to sort through, but honestly, it was shockingly fun. We're already talking about holding a second hackathon early next year, so if you're interested, please join Web Music Developers JP. We might even host a year-end party.

Highlights from the event are compiled on the Google+ event page. If you can't view any of the videos, please check there.