Time flies—this was already the third edition of our hackathon exploring and enjoying sound using browser-ready technologies like the Web Audio API and Web MIDI API. Once again, it was packed with rich content and a ton of fantastic creations, but in this post, I'd like to share a quick overview of how it went.

As it turns out, Web Audio Hackday took place in Berlin just the day before our hackathon. Since the dates were so close, we thought it would be great to collaborate somehow, reached out to each other, and decided to share our results through recap blog posts. I plan to publish an English version of this article shortly. I'll also add a link to the report from Berlin as soon as it's published.

Opening #

After introductory greetings, we kicked things off with an update on the Web MIDI API specifications by @toyoshim, a Google engineer working on the Web MIDI API implementation. Here are his slides:

Next, our returning tutors—@g200kg, @aike1000, and @sascacci, who are well-known figures in Japan's Web Music scene (and globally renowned among those in the know)—each gave demos of applications built with Web Audio and MIDI. The sheer caliber of their work raised the hackathon bar considerably.

@sascacci showcased visual effects driven by electronic drums:

@aike1000 introduced and demoed various templates. His sample code collection contains incredibly handy snippets ranging from generating a sine wave with the Web Audio API to playing audio samples and using delays, pitch shifters, and distortion—anyone interested in web audio programming should definitely check it out. He also shared a collection of synth templates and a VJ framework.

@g200kg demonstrated LiveBeats:

In addition, Mr. Tada from Yamaha announced the Web Music DAW Connector, which bridges DAWs (Digital Audio Workstations)—professional music production software—with the browser. With this, developers can bring plugins built in JavaScript directly into professional music production workflows. You can really feel the Web Music world steadily making progress.

And to top it off, someone from JSPA (Japan Synthesizer Programmers Association) composed and performed an original song specifically for this event. Using Pokemiku as the sound source, it featured not just backing tracks but full vocals by Hatsune Miku. They even produced a video for it:

Since this event was originally conceived with the goal of enabling experiences on the web platform that could genuinely be called "music," this was tremendously inspiring. While we must admit that we are still at a rather primitive "sound" level right now, building up the platform step by step to unlock richer musical possibilities is what makes this effort so exciting.

Hacking #

The venue brought together over 40 participants, alongside many attendees from the W3C, musical instrument manufacturers like Yamaha, Roland, Korg, and Crimson Technology, as well as representatives from JSPA (Japan Synthesizer Programmers Association) and AMEI (Association of Musical Electronics Industry). The level of interest from the musical instrument industry was so strong that it almost overshadowed the web industry.

As with previous events, the manufacturers loaned out instruments, but it was especially impressive how many participants brought their own gear. Check out the photos below to get a sense of the creative energy during the hacking session:

Demo Time #

The hacking session started at 11:30 AM and concluded at 4:30 PM. In just five short hours, a total of 26 unique projects were created, including those by our tutors. While we can't feature everything, here are a few highlights.

Learning from past experiences, we captured the audio for this demo livestream directly via line-in, allowing us to preserve a very high-quality video archive. A big thank you to Roland for providing the equipment. It runs for two and a half hours, but if you're interested, please check out the full livestream archive.

*Note: Each image links to the corresponding timestamp on YouTube.

Professor Murai #

The demo session opened with a special guest: Professor Jun Murai from Keio University, known as the "Father of the Internet in Japan," who gave welcoming remarks. Having such an esteemed guest kicked the excitement up to another level.

D.F.Mac #

Marking his third appearance and a perfect attendance record, D.F.Mac once again baffled and delighted the room with an eccentric creation: a project where triggering vegetables and empty cans triggers sounds from a DAW hooked up to the browser. Read his detailed write-up here.

Masayuki Yokobori #

A project connecting a Densha de Go! train simulator controller via MIDI to produce convincing train sound effects.

Daichi Hirono #

ScoreSketch is a lightweight sequencer. As you would expect from the winner of the previous hackathon, it showed an exceptionally high degree of polish.

kirinsan.org #

A project that analyzes the sound of an Otamatone (?) and converts it into MIDI signals to play a synthesizer.

Takashi Takagi (@okame_okame) #

Electric Mokugyo (Source code) A new creation by Takagi-san, who treats us to mokugyo (wooden fish temple drum) stunts^H art every time.

@watilde #

abeck.js (Source code) A project where inputting a sequence using ABC notation plays back the music and generates the corresponding sheet music.

@mohayonao, @nanonum #

Automatic Composition (Source code) Although it just missed an award, this was a lavish project that was musically impressive and came complete with visualizations.

CookPitch #

A recipe service where you can flip pages and navigate using hummed pitches. Since it's completely hands-free, you can consult your PC while cooking!

Himakan #

Face Tracking Effector (Source code) The winning project of this hackathon. While I've seen a few conceptually similar experiments before, the execution of this piece was overwhelmingly cool.

@aike1000 #

Effector of the Future

He took the guitar effect showcased during his opening demo, gave it an authentic look (haven't we seen that somewhere before...?), and performed it as a full song.

@sascacci #

A Miraculous Collaboration

A miraculous collaboration between V-Drums and Dontata-kun. Dontata-kun played the drums in sync with the V-Drums, culminating in an impromptu jam session over the track provided by JSPA!

@g200kg #

He presented an upgraded version of Livebeats.

Wrap-up #

This Web Music Hackathon was another resounding success. As participants become more comfortable with their chosen platforms, you can clearly tell the creations are becoming increasingly musical. There is still a ways to go, but personally, I hope this grows into an event where practicing musicians can join in and have fun as well.

Stay tuned for the next one!

P.S. Huge thanks to the organizer, Mr. Kawai, for all your hard work!