Web Music Hackathon #3 Report: Enjoying Sound in Your Browser
by Eiji Kitamura
This hackathon, which aims to let participants enjoy sound using browser-based APIs like the Web Audio API and Web MIDI API, is now in its third year. This year's event was packed with great content and amazing ideas, but in this post I'd like to briefly summarize the content.
In fact, the day before this hackathon, an event called Web Audio Hackday was held in Berlin. Since the dates are so close, we thought we might want to collaborate on something. So, we've been in touch and are trying to share our results in the form of a blog post. We plan to post an English version of this article later. We'll also link to the report from Berlin as soon as it's published.
Opening #
After some greetings, @toyoshim, a Google engineer in charge of implementing the Web MIDI API, kicked off the event with an update on the Web MIDI API specifications. The materials are available here:
Also participating as tutors this time were @g200kg, @aike1000, and @sascacci, all well-known figures in the Japanese web music world (and in fact, even known to a select few worldwide). Each demoed an application using Web Audio/MIDI. The level of their work was so high that it raised the bar for the hackathon significantly.
@sascacci demonstrated a visual effect using electronic drums.
@aike1000 introduced and demonstrated various templates. Sample Code Collection contains some very useful snippets, from generating sine waves using the Web Audio API to playing sample sounds, and using delay, pitch changers, and distortion. Anyone interested in web-based audio programming should definitely check it out. Other resources include Synth Template Collection and VJ Framework.
@g200kg has a LiveBeats demo.
Yamaha's Tada also announced the Web Music DAW Connector, which connects a DAW (Digital Audio Workstation), a professional music production environment, to a browser. This allows you to incorporate JavaScript-based plugins into professional music production. It really feels like the world of web music is steadily moving forward.
And this time, members of the JSPA (Japan Synthesizer Programmers Association) created a song especially for this event and performed it. The sound source is PokeMiku, so it not only has accompaniment but also Hatsune Miku's vocals. They also produced a video.
This event was originally intended to be a platform for creating something that could be called "music," so it was a great inspiration. While it's true that at this stage we're still stuck at the primitive level of "sound," the real excitement lies in building the platform even further and enabling even more musical possibilities.
Hacking
In addition to the over 40 attendees, we also had many attendees from musical instrument manufacturers such as W3C, Yamaha, Roland, Korg, and Crimson Technology, as well as representatives from the Japan Synthesizer Programmers Association (JSPA)(http://www.jspa.gr.jp/) and the Musical Electronics Industry Association (AMEI)(http://www.amei.or.jp/). The event attracted more attention from the musical instrument industry than from the web industry.
This time, we had various instrument manufacturers lend us their instruments, but what was striking was that so many people brought their own instruments. Check out the photos to see the excitement during the hacking session.
Demo time #
Hacking time began at 11:30 and ended at 4:30. It was only five hours, but the students produced a total of 26 unique creations, including those by the tutors. We can't introduce them all, so we'll just highlight a few.
Learning from past experiences, we recorded the audio over line during this demo livestream, which allowed us to deliver a very high-quality video. We'd like to thank Roland for providing us with the equipment. The video is two and a half hours long, but if you're interested, please check out the full livestream archive.
*Each image links to the corresponding section on YouTube.
Professor Murai #
The first special guest to appear during demo time was Professor Jun Murai of Keio University, known as the father of the Internet in Japan. He gave a speech. The excitement rose with the arrival of this special guest.
D.F.Mac #
This was [D.F.Mac]'s third appearance, and he's back with a perfect record. He once again left the audience baffled with his unique piece. His piece uses vegetables and empty cans as triggers to play sounds from a DAW linked to a browser. For a detailed explanation, click here.
Masayuki Yokobori #
This work allows you to connect a Densha de Go! controller via MIDI to produce similar sounds.
Daichi Hirono #
ScoreSketch is a simple sequencer. Like the previous winner's work, it's extremely polished.
kirinsan.org #
This piece analyzes the sound of an Otamatone, converts it into a MIDI signal, and plays it on a synthesizer.
Takagi Takashi (@okame_okame) #
Electric Mokugyo (Source Code) A new work by Takagi, who always showcases his Mokugyo art.
@watilde #
abeck.js (Source Code) This work allows you to play music and generate sheet music by registering a sequence using ABC Notation.
@mohayonao, @nanonum #
Automatic Composition (Source Code) Although it didn't win a prize, this is a gorgeous piece that's musically cool and even includes visualizations.
CookPitch #
A recipe service that lets you turn pages by humming. No hands required, so you can check your PC while cooking!
Himakan #
Face Tracking Effector (Source Code) This is the winning entry. I've seen a few similar ideas, but this one is by far the coolest.
@aike1000 #
Effects of the Future
He added a similar look (somewhere I've seen this before...?) to the guitar effects shown in the opening demo and performed it as a song.
@sascacci #
A miraculous collaboration
This is a miraculous collaboration between V-Drums and Dontata. Dontata plays along with V-Drums. And they jam together to music provided by JSPA!
@g200kg #
They showed off an improved version of Livebeats.
summary #
This year's Web Music Hackathon was another exciting one. Everyone is becoming familiar with the platform and it feels like things are gradually becoming more musical. It will probably take some time, but I personally hope that it will become an event that musicians can enjoy.
Stay tuned for next time!
P.S. Thanks to the organizer Kawai-san for your hard work!
Subscribe via RSS














