Here at the W3C Keio host in Japan we try to take part in local events to demonstrate progress of the Open Web Platform. Most recently was an event called Open Research Forum which showcases the work and research of Keio University SFC (Shonan Fujisawa Campus) and we chose to focus on web and music. As well as a booth with interactive demos, we added a special session at a separate venue (Nicofarre) which combined a discussion panel and music performance to show off what can be done with web technologies.
Imagine a nightclub emptied of dancers and filled with chairs, gadgets and geeks. Now add a 360° screen courtesy of large LCD panels on all four walls and even the ceiling. That’s Nicofarre, and being owned by NicoNico Douga, a popular Japanese video-sharing website, the event was live-streamed on the web with viewer comments overlaid in real time over the animations on the aforementioned LCD panels.
The huge animations were generated in an HTML5 canvas element on a hard-working laptop backstage and were synchronised with audio using the Web MIDI API. The API itself was fed data from two MIDI-connected electric guitars:
Web MIDI API
One visual effect was each string appearing as a coloured band across the walls as they were played, with animated bubbles showing where the guitarist’s fingers were placed on the fretboard.
The intervening discussion focused not just on the status of audio-related web standards but also on other web technologies that were enhancing the event, such as remote-controlled robots that captured video using
getUserMedia. These streams were sent using WebRTC to be simultaneously shown at a separate event in Tokyo — Musical Instruments Fair Japan.
We’re fortunate to have a large and passionate community of web developers and designers here in Japan, the birthplace of karaoke, and within that a keen group dedicated to web and music. They’ve previously held three hackathons to share knowledge and push the boundaries of what’s possible in a browser. Hopefully this event has highlighted how the community is trying to bring diverse areas of the web together in perfect harmony.