日本語

On July 25th 2015, Web Music Hackathon #4 was ran with GDG(Google Developer Groups) Kyoto at Kyoto. AMEI(Association of Musical Electronics Industry) provided digital musical instruments as usual for this hackathon. We thank AMEI for supporting this hackathon all the time. This time KRP(Kyoto Research Park) provided us a great room at great location at Kyoto! We also deeply thank for this help.

At the hackathon, 10 applications were developed/hacked by over 30 attendees, and 3 applications were developed/hacked by tutors. At web music hackathon always gives developers funny development environment because we can listen lots of sound, and also can listen singing by Pocket-Miku(singing device). Definitely, this time was not an exception. Especially, KORG first provided us little Bits Synth Kit with MIDI modules at first time, so the room was full filled with lots of analog synth sounds sometime🙂

Picture at the hackathon is here

Ok, let me introduce what happend at the hackathon along the schedule of that day.

At first, I introduced our three of great tutors, who are @g200kg, @aike1000 and @sascacci, and they gave us presentation with several great demos.

At presentation of @aike1000, he looked like using his iPhone to turn the slides. At the end of his presentation he revealed that his slides is created by HTML5 slide, and also he is using MIDI over Bluetooth LE and Web MIDI API with Web MIDI browser on iOS platform to turn the slides. Day after the hackathon, he published the application on twitter. (the tweet is in Japanese, though..) [Source Code]

After tutors’ presentation is team building. 7 themes were picked up by the summary of questionnaire of “What would you like to hack at this hackathon?”, and that answer is required when attendees RSVP.
7 themes are following:

• Communication
• Use with Hardware(includes MIDI devices)
• Emulate things(existing hardware or software port to Web platform)
• Use with Graphics
• Building libraries
• For beginners

At first, attendees divide into these themes of groups, and them they have discussion what to hack today before they start hacking in the group. During the discussion, changing theme is one of the choices.

Result of the discussion, 2 themes were reduced. Following list is the final themes.

• Communication
• Use with Hardware(includes MIDI devices)
• Emulate things(existing hardware or software port to Web platform)
• Use with Graphics
• For beginners

At 4:30 pm, hacking time is over, and presentation time came. At this moment, most of groups said “we would like to more time…” actually.

By the way, we prepared learning materials for both Web Audio and Web MIDI by Google’s Codelab format. (These are only for Japanese now, but I will translate them into English ASAP.)

• Codelab: Web Audio
• Codelab: Web MIDI

Now I explain the applications created at hackathon one by one.

Emulate things

Reaktor on Web

by @fukuroder

Emulates Reaktor on Web. This application gives us an ability to synthesize voices and to add sound effect with connecting boxes in the GUI. This application also had share feature by URL.
Live Demo

Tuner

by @moutend

Guitar tuner on Web. @moutend says that “Hardware tuner sometimes not easy to adjust tune by look.”, he solved these weakness of hardware tuner by this application: Uses big letter, Play sound to tune by sound without looking. The number located next to letter (“D” in the picture above) is representing how much cents are different from the right frequency.
But he says that it still have bugs in detecting pitch sometime…..

Use with Hardware

Synthesizer built with ScriptProcessor node that can be manipulated by acceleration sensor in iPhone

by Masaki Ono

Basic voice is created with Oscillator synced and the implementation is using ScriptProcessor Node. Adding to that, the voice is manipulated by acceleration sensor in iPhone. So frequency is updated when iPhone is shaked.(The picture above is the picture of shaking iPhone. But we can not see because iPhone is shaked too fast…)

GamePad to MIDI by MK

by Kaki

Getting input message from gamepad with gamepad API. Gamepad input is converted to MIDI message, then sending MIDI message to MIDI tone generator(Roland JD-Xi) to play voice. But only “pitch bend down” is activated somehow.

Little Miku

by M.Kosuga

The output from littleBit send to Pocket-Miku through Web browser. The way of defining pitch is counting input signal in each 500ms.

Leap Mothin to Audio

by @hiroqn, @sankichi92

All features, which are tone generator and parser of Leapmotion, is built on top of Electron(Cross-Platform Application build Engine for Desktop Application). No UI, but play tone generator by input of Leapmotion. And the interesting feature of changing filter by gesture is also implemented.

Scratch

by kaisei, yokmama

A game of beating zombies. Game engine is build on top of Scratch, and MIDI inputs from Web MIDI API is used to change zombies moving pattern and controlling the number of zombies. Hacking by parent and child is the first time since Web Music Hackaton is started.

Use with Graphics

Sequencer by grid system

by @ussy9、@_likr、pastelInc、@armorik83

Sequencer by grid system. The application allow to update dots in grid system in realtime with several users. Realtime update mechanism is using “Firebase”. And during the play, sphere in the left to of the application turns around, and the color of the sphere changes by the kind of playing chord. (The picture is when they had a trouble during their presentation. Realtime synchronization was not working correctly somehow. The problem would be network problem, that is access point of wi-fi was used for video streaming and the access point used for this demo was same.)

This application has playing mode to change scale(minor, major, blues, etc.) automatically.
Web MIDI API, Angular JS, Firebase, SVG, WebGL are used in this application.

This team published slide of secret story to build this application. (only in Japanese)

Communication

Distributed Sequencer

by @mohayonao, @esperia09, @isocoda, @yasuraok

Several clients which has tone generator of Web Audio are connected to servers over WebSocket, and those clients plays with recieving message from server. So it enables to orchestrate with clients which are connected to server.
At their presentation, there were a network problem. The problem might be this, access point was used for video streaming and the access point used for this demo was same.
This team is also providing detailed information in leader’s blog. (Only in Japanese)

For beginners

First step of Web MIDI API

by @kubotaku1119

He explained easiness of implementing of Web MIDI API. Actually, it was the first time to use Web MIDI API.

Tutors

Foot Drum

by @sascacci

Developed application is using KORG CLIPHIT (Make any surface electric drum only with clipping trigger) and Roland TM-2(tone generator especially for Hybrid Drum with trigger) . Connect 2 of CLIPHIT trigger to TM-2, and attach the each clip to your each foot, and TM-2 is also connect to browser by MIDI. So with tapping feet, making drum sound by sending message to TM-2, and that signal is also send to browser by MIDI, eventually browser is able to update graphics in browser window by recieved the MIDI messages.
From his work(he works for Roland), he said “Please use the clip of KORG’s CLIPHIT with Roland’s TM-2 at your own risk.” This notice made attendees’ laugh.

Playable Rhythm Machine

by @aike1000

Sometimes, sequence time line of rhythm machines is linear even if the sequence is set to play as loop. Since it is not so intuitive, so what he developed is rhythm machine which time line is shaped to round. Waveform is able to locate on the circumference.

LiveBeats MIDI Plugin

by @g200kg

LiveBeats is the web application that create music by inputting music recipe(rhythm patterns, melodies and so on) from application’s command line. This application is also developed by him. This time he added MIDI input feature, and that feature allow users to play a music by MIDI devices along with the music created by command line. In the picture, he is playing a like playing the guitar.


After these presentation, we(staff) selected 3 excelent applications by these three criteria of “Idea”, “Technical” and “perfection”. Actually, the selection process was difficult, because every application has great idea, and high perfection.

• Scratch by kaisei, yokmama：The idea of the game is great, and we liked the challenge of collaborating child with parent to build one application.
• Sequencer by grid system by @ussy9、@_likr、pastelInc、@armorik83：With using several technologies, realtime and collaboration sequencer was high perfection. And the feature of automatic scale changer was great, too. The application highly satisfies all of the criteria.
• Distributed Sequencer by @mohayonao, @esperia09, @isocoda, @yasuraok：Fantastic Idea, and technically high level, and also perfection is high. The application also highly satisfies all of the criteria.

Conclusion

It was 4th time of Web Music Hackathon. Idea, technically, and perfection is getting higher and higher in each time. I hope I would like to run another one. I am looking forward to see you at next time!!

Acknowledgments

This was first time to run an event out side of Kanto area for me. So there are some worries, adding to that a typhoon might direct hit to Kyoto at the day of hackathon. (Eventually, it was not, but it was so close.) But almost all attendees who registered had joined the event and hacking all together. It was awesome things, and I am deeply appreciate that.
And to run hackathon in Kansai area, I want to say thank you for Ms. Kurano of GDG Kyoto, Mr.Tada and Mr. Noda of GDG Kyoto, and all of the staff from GDG. And also really appreciate to Mr. Terado of KRP for providing us a big and great room. Thank you very much!!
Finally, I want to say thank you for @aike1000 to join the hackathon from Sapporo(Hokkaido), and @g200kg from Yokohama as tutor.
I think this hackathon is run by attendees’ passion to build web music applications. So, please keep building your web music applications!!
Thank you very much.

おまけ

I did sightseeing in Kyoto day after hackathon. I visited 33-Gendo where one thousand of statue of Goddess of Mercy is displayed. MIDIAppy of this time was drawn in reference to the statue by @g200kg. I was amazed by one thousands of statues.(picture below is Kinkaku-ji)

!! NOTICE !! (as is 29th May 2015)
Web MIDI API on Chrome DOES NOT work with the device updated M developer preview for now.

Android M has just revealed at Google I/O 2015. And from this release, MIDI is natively supported by the API. So, now you can manipulate(be manipulated) the MIDI devices from Android’s native app, not only by Web MIDI API on Chrome. Here is the way of installing Android M and the document of MIDI API.

1. Install M (at your own risk)
   Follow this instruction.
2. Document for MIDI API
   - Download this document as ZIP.
   - Unzip the file.
   - Docs for MIDI API is under this path: reference/android/media/midi/package-summary.html.

MIDI API on Android looks really familier for developers know Web MIDI API.

!!注意!! (2015/5/29現在)
Developer PreviewのMにアップデートすると、ChromeのWeb MIDI APIは動作しなくなります。

Google I/O 2015にてAndroid Mがリリースされました。そして、このAndroidからMIDIがサポートされましたので、Web MIDI APIからのみではなく、AndroidアプリからMIDIデバイスを操作することが可能となりました！
Mのインストール方法とMIDI APIのドキュメントは以下になります。

1. Mのインストール（at your own riskでお願いします。）
   この手順で行ってみてください。 http://goo.gl/TmPtTT
2. MIDI APIのドキュメント
   - このZIPファイルをダウンロードします。 http://goo.gl/ynHnwL
   - ダウンロードしたファイルを解凍してください。
   - ドキュメントのPathは reference/android/media/midi/package-summary.html です。

Web MIDI APIにとても似ているので、Web MIDIに馴染みのある方は分かりやすいと思います！

English Version

Chrome43（今日配信されたCanaryで試せます）でWeb MIDI APIに新たな機能が追加になりました！（まだMacだけ）
その機能はChromeを起動中にMIDI機器を抜いたり、挿したりした場合にEventが飛ぶという機能です。今まで、Chrome起動中にMIDI機器を挿しても認識してくれませんでしたので、とても便利になりますよね^^
仕様的には MIDIAccess Interfaceのonstatechange と、MIDIPort Interfaceのonstatechange です。
MIDIAccessの方のコードを書いてみるとこんな感じ。３行目から５行目のところ。

navigator.requestMIDIAccess({"sysex":true}).then(successCallback, errorCallback);
function successCallback(access) {
      access.onstatechange=function(event){
          console.log(event);
          // event.port に 接続/切断 されたMIDI機器が入っています。
      }
}
function errorCallback(msg) {
      console.log("[ERROR] ", msg);
}

こんな感じのがconsoleに表示されます。 port には接続/切断されたMIDI機器の情報が入ってきます。port.state に 状態が入ってきてその意味はこんな感じになっています。

• disconnected：接続されていた機器が切断された状態
• connected：接続されたけど、データのやりとりはできません状態
• opened：接続され、データのやりとりができます状態

MIDIPort の方の同じように、onstatechangeにEventhandlerを書いてやると接続/切断で反応してくれます。

MIDIPortのEventhandlerについてですが、MIDIAccessのinputs/outputsのIteratorは接続/切断がある毎に更新されていますので、正確には requestMIDIAccess() 実行後でもEventhandlerをつけることは可能でした。間違った説明をしてしまいすみませんでした。（更新：2015/2/25 23:30）

ということで、また1つ便利になりました^^

日本語

Web MIDI API on Chrome gets new feature from M43(You can try with Canary from today!!). That feature is Hot-Plug. So, the Chrome immediately recognizes MIDI device’s connection or disconnection. The connection/disconnection of MIDI device is informed by event. Before M43, Chrome does not recognize the MIDI devices are connected after requestMIDIAccess() is used. I think to add this feature is a big progress!! In the spec, Hot-Plug feature is written as “onstatechage” in MIDIAccess Interface and MIDI Port Interface. Let’s take a look at how to write code.

navigator.requestMIDIAccess({"sysex":true}).then(successCallback, errorCallback);
function successCallback(access) {
      access.onstatechange=function(event){
          console.log(event);
          // event.port に 接続/切断 されたMIDI機器が入っています。
      }
}
function errorCallback(msg) {
      console.log("[ERROR] ", msg);
}

The device information(MIDIPort) which is connected/disconnected is set in port. And its status is coming into port.state. port.state has 3 status in below.

• disconnected: the device, which is connected , is disconnected
• connected: the device is connected, but does NOT accept data transfer
• opened: the device is connected, and ready to transfer data
  For MIDIPort, code and state are exactly same with MIDIAccess. When the event is attached to MIDIPort, connection/disconnection will be detected and informeb by event.
  
  This update would help lots of application which is using Web MIDI API and improve user experience!!!

1月25日に東京電機大学で行われたHTML5 Conferenceにセッション、展示、ラジオといろいろ参加させていただきましたっ！セッションに足を運んで下さった皆様、またライブ配信でご視聴くださいました皆様、本当にありがとうございます。 そういえば展示会場でPepperが歌って踊る「Pepper Sings」の展示もしていただいちゃいましたね^^ 本当にありがとうございました。展示は @g200kg さんに99%お手伝い頂いちゃいましたけどf(^-^;)

ということで、セッションの資料とデモアプリのソースのURLを書いておきます。（動画も追記しました！ 2015/01/27）

HTML5 Conferenceってホントに毎年大きくなって、毎年盛上がっててスゴイですね！！今後とも出来る限りお手伝いさせていただきたく思います。

それにしても、村井先生、及川さんとのラジオは緊張したな〜＞＜
（ラジオの動画を追加しました。2015/01/27）

さて、今年のWeb Music Developers JPの活動ですが、まずは関西でもハッカソンを開催することを目標にやっていきたいと思ってます。もちろんでも関東でもハッカソンやりますので、よろしくお願いします！！Web Music盛上がって行きましょう^^