Did you know web browsers can now make music? Or at least sound. By using the Web Audio API, you can synthesize, add effects, modulate, split, and merge—whatever audio processing you can imagine is now available across many browsers. There is also MIDI support. Chrome has a Web MIDI API implementation behind a flag, so you can hook up your synthesizer to send and receive MIDI signals.

These APIs are quite low-level, so there's plenty of groundwork required to create actual "music" in the browser. But that also means this is an exciting time to help lay the foundations for the future of web-based music platforms.

That brings us to the "Web Music Hackathon," an event hosted since last year by Google and the community "Web Music Developers JP." Participants enjoy building apps using the Web Audio API, the Web MIDI API, and related technologies such as WebRTC and the Web Speech API—exploring whatever their imaginations can cook up when combining the web and music.

Every time we run this event, we see incredible ideas and implementations that make the most of this intersection.

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

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

Coincidentally, a similar event called Web Audio Hackday was taking place in Berlin around the same time. We decided to collaborate and cross-share our event reports. To any Web Audio Hackday attendees reading this: nice to meet you! :) I'll link to the WAH report once it's available.

Opening #

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

Three mentors followed with demos of their own. They are household names in the Japanese Web Music scene, though I imagine many worldwide recognize them as well :) @g200kg, @aike1000, and @sascacci.

@sascacci showcased a V-Drums visual effect.

@aike1000 shared some practical knowledge with the attendees: web audio sample codes, which compiles useful snippets for generating sine waves, playing samples, creating delay, pitch shifting, distortion, and more. He also shared a synthesizer template and a VJ framework.

@g200kg demonstrated his latest project: LiveBeats.

Mr. Tada from Yamaha Corporation introduced a new tool called the "Web Music DAW Connector." It is a VST plugin that connects a DAW environment to a browser over WebSocket. In his demo, Cubase connected over Wi-Fi to Chrome running on a remote Nexus 7 to insert an audio effect. The web and music production are drawing closer than ever.

JSPA (Japan Synthesizer Programmer Association) presented a track composed specifically for this event. It was designed to play through PokeMiku, so it actually sings. For those unfamiliar with Vocaloid technology, definitely check it out—it is immensely popular in Japan.

This was a great reminder that making music directly in the browser is the ultimate goal here. While we are still experimenting with generating "sounds," eventually creating full-fledged "music" with these technologies is where we want to be.

Hacking #

We had over 40 participants, including representatives from the W3C, instrument manufacturers (Yamaha, Roland, Korg, Crimson Technology), JSPA, and AMEI (Association of Musical Electronics Industry). From an outsider's perspective, it looked almost like an instrument industry convention (though most attendees were web developers!).

As always, the instrument makers generously lent us an abundance of gear, and attendees brought plenty of their own fun gadgets to the venue. Check out photos from the event (click the image below):

Demos #

Hacking started at 11:30 AM and wrapped up at 4:30 PM. Despite having only 5 hours of hacking time, people produced an impressive total of 26 projects! I can't cover all of them here, so let me highlight a few standouts.

You can watch the full archive of the two-and-a-half-hour demo livestream. If you have some time, check it out! (Click on the screenshots below to jump to the respective timestamps in the video.)

Mr. Murai #

Jun Murai, widely recognized as the father of the internet in Japan, made a special guest appearance. It was an honor to see his interest in these technologies, and the room was thrilled to have him.

D.F.Mac #

This was the third time D.F.Mac has joined this hackathon. Everything he builds is delightfully inventive, and this project was no exception. He turned vegetables and tin cans into musical instruments. Check out the video to hear the quirky sounds! While I don't know the exact inner workings, he wrote up the technical details here (in Japanese).

Masayuki Yokobori #

He borrowed his son's toy train set to create an interactive app: the moving train triggers sounds via MIDI.

Daichi Hirono #

ScoreSketch is an intuitive sequencer created by the winner of our 2nd hackathon.

kirinsan.org #

This project detects the pitch generated by an Otamatone, translates it into MIDI signals, and drives a synthesizer in real time.

Takashi Takagi (@okame_okame) #

Electric Mokugyo (Source code) A mokugyo is a wooden slit drum used in Buddhist chanting. He wired it up to use as an expressive percussion instrument.

@watilde #

abeck.js (Source code) Write out a sequence using ABC notation, and it renders sheet music while playing back the score.

@mohayonao, @nanonum #

Automatic composition (Source code) Many in the community know @mohayonao for his stunning Web Audio demos. Together with @nanonum, he built a polished generative music and audio visualization project.

CookPitch #

A clever and practical application of Web Audio: it allows users to navigate recipe pages by humming, completely hands-free—ideal when your hands are messy while cooking.

Himakan #

Face Tracking Effector (Source code)

The overall winner of this hackathon. While face-tracking audio control has been attempted before, this execution was exceptionally slick.

@aike1000 #

Future effectors Realistic guitar effects pedals built right into the browser. @aike1000 played an original guitar composition live through them.

@sascacci #

Miracle collaboration A duet between electronic V-Drums and "Dontata-kun"—a small robotic drummer controlled over MIDI. He demonstrated Dontata-kun drumming along in perfect synchronization with his own playing to the JSPA song!

@g200kg #

@g200kg demonstrated an updated build of LiveBeats.

Closing #

This was once again a fun and rewarding hackathon. Developers seem increasingly comfortable building rich audio applications on the web. Looking ahead, we hope to bring musicians into the mix to collaborate on writing actual music alongside building apps.

See you next time!

P.S. A big thank-you to our main organizer, Ryoya Kawai. Otsukare-sama!