Did you know web browsers can now make music? Or at least sound. By using Web Audio API, you can synthesize, add effects, modulate, split, merge - whatever you can imagine to process audio: they are available on many browsers.
There's also MIDI support. Chrome has Web MIDI implementation behind a flag so you can hook up your synthesizer and send or receive MIDI signals with it.

Those APIs are quite low level. So there's tons of things you need to do to make "music" on top of browsers, but that also means an interesting time of building up fundamentals for the future music platform.

So, this is the event Google and a community "Web Music Developers JP" have been running since last year called "Web Music Hackathon". Attendees enjoy building apps using Web Audio API, Web MIDI API and other related technologies such as WebRTC, Web Speech API, etc - whatever they can imagine web + music can do.

Every time we run this event, we saw incredible ideas and implementations of music apps that take advantage of fusion between web and music.

Check out the first hackathon's winner's demo:

And the second one (English full report is here):

Coincidentally, there was a similar event called Web Audio Hackday in Berlin. So we decided to collaborate and show event reports each other. Web Audio Hackday attendees, if you are reading this, nice to meet you :)
I will link back to the WAH report when available.

Opening #

We started the day with an update from Google engineer and Web MIDI API implementor @toyoshim about what's new in Web MIDI API. Here's the slides:

3 tutors followed him giving demos. They are well known in Japanese Web Music land, but I assume they are famous world wide as well :) @g200kg, @aike1000, and @sascacci.

@sascacci introduced V-drum visual effect.

@aike1000 gave attendees some wisdoms: web audio sample codes list useful snippets such as generating sign waves, play samples, how to write delay, pitch shift, distortion, etc. Also a template for synthesizer, and VJ framework.

@g200kg showed off demo of his new project: LiveBeats

Mr. Tada from YAMAHA Corp introduced a new product called "Web Music DAW Connector". This is a VST plugin that connects a DAW system with a browser via WebSocket. He showed us a demonstration: his Cubase connects with Chrome running on remote Nexus 7 over Wifi and that inserts an effect.
Web and music are getting closer and closer.

JSPA (Japan Synthesizer Programmer Association) presented us a song written specifically for this event. And it is intended to play on PokeMiku, so it sings. For those who are not familiar with Vocaloid technology, check this out. It's a very popular technology in Japan.

This reminded me of making music on top of browsers is the goal for this event. We are still making "sounds" but eventually creating "music" using these technologies, should be the ultimate goal.

Hacking #

There were 40+ attendees and people from W3C, instrument makers (YAMAHA, Roland, Korg, Crimson Technologies), JSPA, AMEI (Association of Musical Electronics Industry),etc. It's more like instrument industry event from outside. (Attendees were mostly web engineers I guess)

The instrument makers lent us many equipments as usual, but attendees also brought their own fun gadgets to the venue. Check out photos from the event (click on the picture below).

Demos #

We started hacking at 11:30AM, finished at 4:30PM. There was only 5 hours hacking time, but people came up with fantastic works in total 26! I can't mention about everything, so let me pick up some best ones.

We have an archive of live streaming of 2 and half hours of demo time. If you are interested or bored, check it out. (click on pictures to start the video from relevant time)

Mr. Murai #

Mr. Murai is called a father of Japanese internet. He showed up as a special guest and it was an honor that he's interested in this technology. People got excited.

D.F.Mac #

This was the 3rd attendance for D.F.Mac to this hackathon. Everything he creates is unique and this one didn't betray us. He made vegetables and cans into instruments. Try the video to hear the weird sound. I don't know how it works in detail, but here's the technical document he wrote (in Japanese).

Masayuki Yokobori #

He stole his son's toys and created an app using them. The train make sounds using MIDI.

Daichi Hirono #

ScoreSketch is a simple sequencer by the winner of 2nd hackathon.

kirinsan.org #

Dictates sound Otamatone generates, convert it to MIDI signals, and play synthesizer.

Takashi Takagi(@okame_okame) #

Electric Mokugyo (Source code)
Mokugyo is a wooden drum that buddhists use to pray. He used it as an instrument.

@watilde #

abeck.js (Source code)
By writing a music sequence using ABC notation, it plays music and draws a sheet.

@mohayonao, @nanonum #

Automatic composition (Source code)
Some people may know @mohayonao for creating incredible web audio demos. He and @nanonum created a cool music / visualization demo.

CookPitch #

This is one of unique demos using Web Audio. It demonstrated a recipe site user can navigate pages by hamming, without using hand. Good for cooks.

Himakan #

Face Tracking Effector (Source code)

The winner of this hackathon. I've seen similar ideas before, but this one is way cooler.

@aike1000 #

Future effectors
Realistic effectors on a browser. @aike1000 played one of his composition with his guitar using these.

@sascacci #

Miracle collaboration
A collaboration of V-Drum and Dontata-kun. Dontata-kun is a little drum player controlled via MIDI. He demonstrated Dontata-kun playing drums synching him playing drums! using JSPA's song.

@g200kg #

@g200kg showed a revised version of Livebeats.

Closing #

This one was again, successful and fun hackathon. Attendees seem to be getting used to using their own favorite platform to build an audio app. Hopefully we can invite musicians and create music as well as apps, in the future.

See you next time!

P.S. Main organizer Ryoya Kawai. Otsukare sama!