名前を「Delicious Days」に変更してBlogを移転しました!
まだまだSocial隆盛な世の中でBlogというのも「今更感」もありますが、 逆にだからこそBlogを、と思って移転して心機一転、生活の中で美味しい体験を書いていこうかと思っての移転です。


Socialはとても手軽でよい情報発信ではあります。しかしながら、手軽だからこそ忘れられてしまった何かがあるような気が最近よくしていて、 具体的に「何が?」に気がつけるといいな、なんて思っています。それから、今まではBlogのサービスを使っていたこともあって、 機能の追加とか自分ではできなかったので、このブログを実験の場にもしていこうと思っています!

English Version

Webブラウザは音楽アプリケーションのプラットフォームの1つになっています。それらを支えるのが Web Audio API、Web MIDI API です。

  • Web Audio API: 信号処理を可能にしていて、例えば楽器を作る、音楽ファイルを加工することを可能にしています。
  • Web MIDI API: ブラウザと外部MIDI機器との接続を可能にしています。

Web Audio APIは現在ほぼ全てのブラウザでサポートされていて、Web MIDI API はGoogle Chromeのみでサポートされています。(Firefoxでも実装は完了していて、現在コードレビュー中です。 2016/8/3 現在)

今までに4回行った Web Music ハッカソン ではテーマは設けず「音楽アプリケーションを思うがままにハックする」 ということで行ってきましtが、今回は現場をハックするという大きな目標の元で「VJ/DJ」をそのテーマとしました。
このテーマのもとで5つのアプリケーションが優秀賞に選ばれました。

[1位] “Cloud Synthesizer” developed by Tomasz

アプリケーションを表示しているブラウザがシンセサイザの一部になる、というアプリケーションです。実際の演奏はマスタとなるアプリケーションに対してMIDIデバイスからメッセージを送り音を出す、という形です。今回のデモは4つのグループに分割し、それぞれが別のパートの音を担当して音楽を奏でていました。メッセージのやりとりにはFirebaseが使われています。 このシステムを使えばライブ会場にスピーカが不要になるかもしれない、と感じました。

[2位] “nanoBlocks” developed by nas

マルチタッチディスプレイを用いた Wavetable シンセサイザです。 それぞれの指でFilte、Pitchまた音源を操作して、音を作り出します。たいていの楽器は指で異なるPitchの音を作り出していますが、このアプリケーションは指で音源の変化、ピッチの変化、各種Filterを変化を現代の主流であるマルチタッチが可能なタッチディスプレイを上手に使うことで新しい楽器が実現されています。 DJという視点から見ると、楽器では出せない音を簡単に手の操作だけで追加でき、新たなプレイ・サウンドの創造を可能にするのでは?という感想を持ちました。
[Live Demo]

[3位] “トレンド Sampler” developed by Takashi Mizuhiki

基本的にはスッテプシーケンサなんですが、音の要素がGoogleトレンドから引っ張ってきたトレンドワードをMacのSayコマンドで喋らせたもの、という面白いアプリ。MIDIクロックにも対応するのでDAWとの同期もできる。何より流石なのが、話しだしの微調整までできるところ。 DJプレイにトレンドワードを気軽に入れることができそうです。

[4位] “Music Tweet” developed by Tomohiro IKEDA

MMLパーサなのですが、TwitterでツイートされたMMLを演奏するというChrome Extensionです。新しくツイートされたMMLだけでなく、過去にツイートされたのも選択することで再生可能です。さらに、パースしたMMLをWebSocket経由でも送ることがでいるので、そのメッセージに対応したWeb Audio製のシンセを鳴らすことが可能です。
気軽に持ち運べる&メモれるシーケンサということでヤマハのQYシリーズの現代版?という印象もあります。
[GitHub]

[5位] “Vote” developed by mohayonao

このアプリを動作させているブラウザがコントローラとなり1つの音楽を奏でるというアプリケーションです。観客とコラボするといったライブでの演出が可能だったり、またライブ中に観客の盛り上がり具合を見ることもできそうですね。ちなみに、メッセージのやりとりはFirebaseを使ってます。
[LiveDemo] [GitHub] [PerformanceVideo]

[Roland賞]“フレーズでコミュニケーション” developed by Team chaco

コラボレーションして音楽を作るステップシーケンサ。複数人でフレーズを作ったり、修正したりが可能です。色合いだったり、和音だったりを考えられているらしく、どうやっても不協和音にはならないそうです。
[GitHub]

[Firebase賞] “リアルタイム自動アルペジオパターン生成機 for Drum” developed by Team Rotterdam

自動的にドラムパターンを生成し、更にMIDIコントローラでそれらのFilterだったりをコントロールするアプリ。楽器として、とてもストレートなアプリ。MIDIクロックを出すので、他のDAW等と同期した演奏をすることも可能です。

”mi:muz:tuchの設定ツール” developed by D.F.Mac. @TripArts Music

mi:muz:touchというオリジナルのUSB-MIDI基板の設定をブラウザで変更するツール。mi:muz:touchは野菜等をトリガーにして、MIDIでメッセージを生成する基板で、第2回のWeb Music ハッカソンでハックした作品が元になっています。 詳しくはこちら をご覧ください。
[LiveDemo]

“ライトをMIDIコントローラから制御する” developed by Kazuyuki Eguchi

IoT機器をMIDIコントローラから制御するアプリケーションです。インターネット経由で操作できる基板に対して、MIDIコントローラで操作された通りブラウザからメッセージを送り、その先につながっている電球等を制御します。デモではパトランプ、ELワイヤー、テープLEDが制御されていました。

“ImproVJ” developed by team ImproVJ

様々なインプットから音楽を作るアプリケーションです。拍手音からビートを検出したり、ぼかして荒くした画像をステップシーケンサに見立て、その情報から演奏することも可能です。DJの現場ではこのシステムにつながったカメラを観客に向け自動で音楽を生成させる、という使い方がありそうです。

“WONDER.NET” developed by kirinsan.org

カメラからのモーションから画像にエフェクトを適応するアプリケーションです。DJに手軽にVJを追加することのできるアプリケーションかな、と感じました。エフェクトは画像だけでなく、再生している音楽にも適応することができるので、実はVJもDJも一度にすることが可能です。
[LiveDemo] [GitHub]

“dance live” developed by nakaG

観客が動かしたモバイルデバイスのモーションセンサーのデータを使って音にエフェクトをかける要素を抽出して、DJ自身がどのエフェクトを使うかを選定する、というアプリケーションです。観客が間接的にライブに参画できる、新しいコンセプトのアプリケーションだと思いました。

“SPKR” developed by K3

ライブをライブハウス等ではなくて、スピーカのないところでもできるように観客のスマホのスピーカを使ってしまう、というコンセプトのアプリケーションでした。参考にしたかったアプリを動作させるのに手間取ってデモは完成していませんでしたが、このツールがあるとどこでもライブパフォーマンスができそうですね。

“Mobile Music Jammer” developed by Team Nolick

接続された機器(PC, mobile phone)を使ってセッションをしよう、というコンセプトです。デモではOpenFrameworksで作られた映像をモバイル端末から操作していました。観客もライブの演奏に加わることができるところが良いと感じました。

“DJHUB” developed by team DJHUB

DJが操作した情報を時間管理の概念のある例えばStandar MIDI Fileにして、GitHubみたいなところで公開、または販売しようというコンセプトのアプリケーションです。時間内には完成はしませんでしたが、DJのプレイを音として残すのではなくて、操作の情報を残す、というユニークなアプリケーションでいした。著作権が適応される音を排除するところがキーだと感じます。



これらの15のアプリケーションが今回のハッカソンでハックされました。

しかし、Web Musicの世界にはラスボスが存在します。ラスボス達は審査対象にはなっておらず、また当日はチューター的な存在で参加してくださっていますが、それでもアプリをハックするというラスボスっぷりを発揮してくださっていますので、そちらのアプリもご紹介します。

[ラスボス] “3D Sequencer” developed by @aike

3DのUIを持つステップシーケンサです。音楽を奏でているだけの情報を3Dで見せるとこんなにキレイなんだ、と感じました。 ハッカソン後に公開された 模範映像がこちら です。 Super Cool!!

[ラスボス] “LiveBeats” developed by @g200kg

LiveBeatsはPC/Macを楽器にしてしまう、というコンセプトから生まれたそうです。今回はWeb Speech Synthesis APIを使って音声を合成し、それを演奏に組み込んでいました。百聞は意見に敷かずという類のアプリですので映像を御覧ください。
[LiveDemo]

[ラスボス] “Growl Bass” developed by @toyoshim

2つのアプリケーションを紹介してくださいました。1つは映像の中のパーティクルを音にするアプリケーション [LiveDemo]、 もう1つはグロール音を簡単に作るためのアプリケーションです。MIDIで出力することもできるので外部音源を鳴らすことも可能です。 [LiveDemo]


これらが今回のハッカソンの全てとなります。

Web Music ハッカソンも5回目となりましたが、今回はハックされた作品のレベルの高さを感じました。恐らくこの要因は少なくとも2つあると思います。まず1つは日々、Web Audio/MIDI APIの認知度が上がり、「とにかくAPIを使う」ではなくて「APIを使ってどんなことをしようか」というAPIを使うからアプリケーションにAPIを参加させる方向に向かっていると思います。もう1点は事前ミートアップです。今回、事前Meetupをしようか非常に迷いました。なぜならいつもは行っていないので、参加者の皆様に集まっていただけるかを懸念しておりました。が、結果からすると、開催してとてもよかったです。ハッカソン当日の全てのチームが事前ミートアップでできたわけではありませんし、全てのハッカソン参加者が事前ミートアップに参加できた訳でもありません。が、事前に顔を合わせることで場全体のIceBreakingされた状態から始まったので、ハッカソン当日の短い時間を非常に有効に使っていただけたのだと思っています。実際に参加者から「事前ミートアップのお陰でハック開始直後から始めることができた」と感想も頂いています。
事前ミートアップから、ハッカソンで質の高い成果物を作るためには、ハック開始前にIceBreakingは終わらせておくことがポイントかな、と改めて学ぶことができました。

事前ミートアップの様子

事前ミートアップ、ハッカソンを通して、ハックしてくださった参加者の皆様、本当にお疲れ様でした。また、ハッカソンのサポートをしてくださった以下の皆様に心より感謝いたします。

  • 事前ミートアップ:関さん(HackCamp)、レンツさん(LIG)
  • ハッカソン:Googleさんよりランチ&場所のご提供、AMEIより楽器の提供
  • ハッカソンの審査員:田所 淳さん、新谷垣内 達也さん、藍 圭介さん、渡邊 正和さん
  • After Party:Red Bullさんより場所のご提供、レンツさん&エディさんのディレクション

Web Music ハッカソンはまたいつか開催したいと思っていますので、その時にはまたお会いしましょう!!

日本語

Web Browser is becoming a music application’s platform. That platform consists from two APIs such as Web Audio API and Web MIDI API.

  • Web Audio API: enables developers to build signal processing applications such as Musical Instruments, software DJ console and so on
  • Web MIDI API: enables developers to connect external MIDI devices to your browser

For now, Web Audio API is supported by almost all of web browser, and Web MIDI API is only supported by Google Chrome. (Firefox is reviewing Web MIDI API source code now, it means it will be available on Firefox shortly!!! : as of Aug 3rd 2016)

“VJ and DJ” was the theme for the Hackathon this time. The hackathon does not have any themes before, but great apps had been hacked at the hackathon, so we wanted to try hack not only application but live performance by web applications this time. So the theme was decided as “VJ and DJ”.
This time 5 great apps were chosen as great app!! Let’s take closer look at hacked app one by one from the greatest app.

[1st] “Cloud Synthesizer” developed by Tomasz

All of client that displaying the application becomes part if the synthesizers, and those are controlled by master application which external MIDI devices are connected. Technically, control message is synced through Firebase. At this demo, clients are divided into 4 groups, and each groups are playing different sounds.
With this application, client of audience is part of instruments, so speaker may not need to have live performance and audience is not audience anymore.

[2nd] “nanoBlocks” developed by nas

Wavetable synthesizer played by multi touch feature. Each touch controls filters, oscillators’ volume, and pitch by doing up and down each functionality boxes in the touch screen. With using this application, you can easily add new cool sound into your DJ play. [Live Demo]

[3rd] “Trend Sampler” developed by Takashi Mizuhiki

Basically, the app is step sequencer with sampler, but the sounds of the sampler is the voice which is made from Google trend words. And these voices are created by “say command” in Mac OS, and words are obtained from internet automatically. Great point of this app is that sending MIDI clock and recieving MIDI clock is supported. So it is easy to play along with DAW or external MIDI devices.
So eventually, trend word can be filled in to any DJs play really easily.

[4th] “Music Tweet” developed by Tomohiro IKEDA

Basically MML parser of Chrome extension, but parsing MML in the Twitter tweet. And cool feature is that this extension is enabled play the synthesizer of external URL with using WebSocket. This extension is able to parse and play MML only by selecting MML in timeline. It might be great work on taking memo of phrase that you are inspired from something. It remind me Yamaha’s QY series sequencer.
[GitHub]

[5th] “Vote” developed by mohayonao

The clients which runs this application becomes controller, and remotely connected synthesizer is played by manipulation of those clients. This application is also using Firebase to send controll message. With using this application at live performance, performer is able to perform with audience and to know how much audience have excited by the performance in real time.
[LiveDemo] [GitHub] [PerformanceVideo]

[Roland Prize] “Communication by making phrase” developed by Team chaco

Collaboration step sequencer. Every client become controller and synthesizer, and all of them are synced by Firebase. So everybody on the application is able to make same phrase together by collaboration, even if they are not staying in same place. [GitHub]

[Firebase Prize] “Real time automatic pattern generation arpeggiator for Drum”

Drum pattern generator, and the pattern is controlled by MIDI controller. This pattern generator is sending clock to external MIDI devices to collaborate other synthesizer. This application is really natural tool for DJ playing. Applications from this hackathon tend to become real web application, but this idea is natural/legacy DJ tool on browser.

”Configuration App for DIY Touch Senser MIDI device(mi:muz:tuch)” developed by D.F.Mac. @TripArts Music

Configuration app for DIY MIDI device. App was hacked at this hackathon, and the device was hacked by his hobby. This DIY device allow user to create touch sensor application easiy. He is the one of the guy who has been joining all of Web Music Hackathon, and he developed initial application/device at #2. Watch this videowhat we can do with this application/device can do.
[LiveDemo]

“Manipulate DIY light devices by Web MIDI API” developed by Kazuyuki Eguchi

Whole system is that manipulating independent devies, a.k.a IoT devices, by MIDI controller connected to browser using Web MIDI API. And those controll messages send through internet.
All of the controlled devices are light related devices, such as multi color light bulb(Hue), revolving light, tape LED and EL wire.

“ImproVJ” developed by team ImproVJ

The concept of this application is making music by various input. Let’s take image for example. Image have lots of informations as color, and assume blur the image. After blur the image, some area may change to vivid color. Then play that blur image as step sequencer to assuming NoteOn as vivid color area. This happen in real time. So, the application does real time automatic music creation. In this example, eventually the system is automatic VJ system since image are given, and music will be created by that image.

“WONDER.NET” developed by kirinsan.org

Reflect motion from camera to image effect, and sound effect. Basic idea of this application is also auto generated video for DJ. Cool feature of this application is that sound effect is created by detected motion by camera, and that effect reflects to sounds.
[LiveDemo] [GitHub]

“dance live” developed by nakaG

DJ get accelerometer data from audience’s mobile phone in real time. And those DJ decide a way to use those data. In this demo, those data is assigned to control sound effect type and value. So the application indicating one of the way to collaborate with audience by obtaining extra data from audience and use that for material to make music for DJ.

“SPKR” developed by K3

Basic idea of this application is that using smart phone speaker of audience for delivering DJ’s music. So DJ is able to play remotely, and also big speaker does not require for DJ performance. However, development of the application was not complete during hackathon. This team had been struggling to run application that they wanted to refer, and time was up.

“Mobile Music Jammer” developed by Team Nolick

Connecting number of client(PC, mobile phone) by WebSocket for having music session. In this demo, using MIDI keyboard, and mobile device to manipulate and generate background VJ. This application allows audience to join along with DJ/VJ performance from audience’s seat.

“DJHUB” developed by team DJHUB

Initial idea is that recording DJ performance as format which has time management feature, Standard MIDI File for example, and also isolated from music. And to save/share/re-produce that file for anybody who wants to re-produce that performance. Key point of this idea is practical, that is not to be required to take care of copyright by isolating DJ performance from music.

However, the application development had not been completed during the hackathon.



These 15 applications are the application which is developed by attendees at Web Music Hackathon #5.

But there are Bosses (it is just like a video game does) around Web Music community in Japan. Bosses support attendees during hacking time, but they usually also develop application for having fun. And three Bosses had developed their application, so let me introduce these applications, too.

[BOSS] “3D Sequencer” developed by @aike

Sequencer GUI is usually 2D, but this application is providing GUI as 3D. “Seeing is believing” kind of application. So, please take a look at Performance Video. Super Cool!!

[BOSS] “LiveBeats” developed by @g200kg

LiveBeats is the application that change your computer to musical instruments. And this time, speaking feature, by web speech synthesis, is added. I love this kind of live coding musical instrument application. This application is also “Seeing is believing” kind of stuff.
[LiveDemo]

[BOSS] “Growl Bass” developed by @toyoshim

There are two application. One is create sound from particles. [LiveDemo], The other one is automatic growl sound creation application. Latter one is supporting MIDI output, so it is able to play with any other synthesizers. [LiveDemo]


These are the all about applications that were developed at hackathon this time.

This was the 5th time of Web Music Hackathon, and I am feeling that all of the applications which were developed at this time are really high level than any other time. I think at least two factors exisit to make this happen. One is “Web Audio/MIDI API became well known API than before”, the other is “Pre-meetup”. Pre-meetup was a big challenge for hackathon this time. Pre-meetup had held in 4 days before the hackathon for about 3 hours starting at 7pm. Aim of pre meetup was “team building”. Well, not all of the team was build at the pre meetup, however I heard from several attendees who built group at pre-meetup that “Our team could start hacking quickly at the hackathon morning, because ice breaking had already finished at pre-meetup.”
I have learned that having small pre event before the actual event might be one of the important factors to obtain much higher level achievements to everybody who join the event.

Photo from Pre-Meetup on Tuesday night

I would like to say thank you for all of attendees who made effort to develop applications. And also I would like to say thank you for all who support entire event.
Such as:

  • Pre-meeup was supported by Seki-san from Hackcamp corporation and Lentz-san from LIG corporation
  • Hackathon was supported by Google(Venue and facilities) and AMEI(Musical Instruments)
  • Judge: Atsushi Tadokoro, Tatsuya Shinyagaito, Keisuke Ai, Masakazu Watanabe
  • After Party will be supported by Red Bull(venue and facilities), Lentz-san and Edy-san(direction)

Web Music Hackathon might be back. So please stay tuned!! See you next time!!

ほぼ勢いで買ってきた Chromebook Flip があまりにも衝撃的なデバイスだったので久々にブログにしてみた。
スマホの出現してからというもの、様々な画面サイズだったり、物理キーボードとかが試されている気がする。例えばNexusシリーズのスマホの変遷は4インチ程度から今は6インチに拡大、タブレットの変遷は10インチ、7インチ、9インチと小さくなったり大きくなったり。
そしてやっと最近日本でも購入できるようになったChromeOSなデバイスは基本キーボドがついていて、タッチパネルがついていたり、ついていなかったりしている。

で、最近売りだされたのがChromebook Flip。このデバイスにはキーボード、タッチパネル、そして難ならキーボードはフィリップしてタブレットのようにも使える。

ユースケースを考える。
(手の大きい小さいはあるとは思うけど)個人的にはこんな印象。

  • 5インチ以下:片手でほとんど操作可能で、移動中の操作に最高、そして軽い
  • 6、7インチ:操作に両手が必要だけど画面が大きく見やすく、そこそこ軽い
  • 9、10インチ:見やすいけど、操作に大きな動きが必要、重い

そして 9、10インチになるとできることが増えるので、文字入力にキーボードが欲しくなりますよね。で、Bluetoothのキーボードとか買って試すんだけど「快適」とは言いがたい・・・

そこで気になるのがFlip的なキーボードもタッチパネルも備えてる端末。10インチなのでデカイタブレットと条件はあまり変わらない、けどキーボードとマウスがついてる。使う前は「キーボードが取り外せないのは欠点かもな・・・」と思ってた。
で使ってみると、

「タブレットに戻れない・戻りたくない」

という結果。
で、実はタブレットに戻れない理由は「キーボードが取り外せない&画面とキーボードが180度になる」ところにあるんじゃないかと思った。
人に依存するかもだけど、Webサイトを見ているとSNS投稿したくなったり、メール書きたくなったり、メッセンジャが飛んできたり、いろいろと割込みが入る。そしてそれらには、ある程度の文字入力が必要なもので推敲(大した文章は書けないけどw)をしたくなる場合、数文字とかステッカーで済む場合の2通りあるはず。そんな時、前者の場合ササッとキーボード・マウスで対応できる、後者の場合はタッチ操作でササッと対応できる、このどちらも自らの選択できるのが心地いいんじゃないかという予想です。
「画面とキーボードが180度」に関しては単純に寝転んで使う時にお腹でもホールドできるから僕には便利なのです。(お腹の膨らみ具合的にw)

まとめると「Chromebook Flip最高」ということだけど、結論は「スマホの延長としてのタブレットは7インチまでじゃないかな?(6インチでも代用可)」という気がしています。(タブレットをスマホの延長として使わない場合はその限りではありません。)

English Version

2015年7月25日(土)にWeb Music ハッカソン #4を京都にて行いました。今回は、GDG(Google Developers Group)京都さんと Web Music Developers JP との共催、また AMEI(音楽電子事業協会) さんの後援での開催となりました。また、KRP(京都リサーチパーク)さんに特別にお部屋をご用意いただくことで開催できました。ありがとうございます。

当日の参加者は30名+で、参加者によって10作品、チュータによって3作品がハックされました。京都開催でもやっぱり音楽系のハッカソン、Web Audioで作った音が鳴ったり、AMEIさんより提供していただいた littleBits Synth Kitからのアナログな音、またポケミクから歌ったりと、いつも通りの賑やかなハッキングタイムになりました。

当日の写真はこちらです。

それでは、時間に沿って順に説明をしていきます。

いつものように最初にチューターのご紹介兼プレゼンタイムです。

@g200kgさん、@aike1000さん、@sascacciさんからデモを動かしながらの説明をしていただきました。 ここで@aike1000さんがiPhoneから何やらスライドを操作してるっぽいな〜、と思っていたらMIDI over Bluetooth LEとWeb MIDI APIを組合せて操作していたとのことで、公開をしてくださいました。

この後グループ分けを行いました。ハッカソン申込時に参加者の皆様から記入いただいた内容を元に「コミュニケーション」、「ハードウェア連携」、「エミュレーション」、「グラフィックス」、「Web API連携」、「ライブラリ作成」、「初心者」の7つのテーマでグループ分けを行い、そのグループ内で会話をしてハックするアプリケーションを決めハッキングタイムに入っていただきました。

ハッキング中の様子

グループ分けの結果、5つのテーマに分類が最終的に残りました。

  • エミュレーション(既存のモノをWebAudio化)
  • ハードウェア連携
  • グラフィックス連携
  • コミュニュケーション
  • 初心者

そして、5時間以上に及ぶハッキングタイムは終了し、16:30を迎えたところで発表時間になりました。この段階で、実はどのチームからも「もう少し時間が欲しい・・・」という声が聞こえてきていたものの、心を鬼にしてハッキング打切りとさせていただきました。

ちなみに今回初心者向けにGoogleさんのCodelabのFormatで教材も用意しました。

それでは、発表された作品を1つ1つ紹介していきます。

エミュレーション

Reaktorのようなもの

by @fukuroder

GUIでモジュールを組合わせることで、音響合成・音響効果をつけることのできるソフトウェアReaktorをWebブラウザ上で実現したものになります。合成をする機能に加えて、作成した環境をURLで共有できる機能が実装されていました。
アプリはこちら

チューナー

by @moutend

ギター用のチューナです。@moutendさんは「既存のハードウェアのチューナーは見づらい」ということで、ブラウザ上に大きな文字と、音でどの音とチューニングをしているかが分かるようにした、というアプリケーションです。ノートの右側の数値は「◯◯セントズレています」という意味だそうです。まだバグもあるとのことでした。

ハードウェア連携

ScriptProcessorとiPhoneの加速度センサを用いたシンセ

by Masaki Ono

オシレータシンクをScriptProcessorで実装したという作品です。それに加えてiPhoneの加速度センサで得た周期を、音源の周波数を合わせるという機能もついていました。写真はiPhoneを振っています。(速すぎてiPhoneが見えませんが、、、)

GamePad to MIDI by MK

by Kaki

Gamepadの入力(Gamepad APIを利用)をMIDIに変換して、MIDI音源(Roland JD-Xi)を鳴らします。ピッチベンドがダウンしかできないそうです。

Little Miku

by M.Kosuga

littleBitsからの出力をブラウザで仲介してポケミクと連携するアプリケーションです。littleBitsからの信号をブラウザ受けて500ms毎にカウントして音程決定してそのMIDIメッセージをポケミクに送り演奏します。

Leap Mothin to Audio

by @hiroqn, @sankichi92

クロスプラットフォームデスクトップアプリケーションエンジンのElectronを使った楽器です。UIはありませんが、Leapmotionからの入力を使いWeb Audioでつくたシンセを鳴らします。ジェスチャでFilterが変わるというとこも実装がされていていました。

Scratch

by kaisei, yokmama

ゾンビを倒していくというゲームです。MIDIデバイスからの入力をWebSocketを使ってScratch側に渡してゾンビのパターン・数が変わるという仕組みになっています。Web Music ハッカソン史上初の親子での参加です。お子さんがゲームで登場する絵を描かれました。

グラフィックス連携

ドット絵シーケンサ

by @ussy9@_likrpastelInc@armorik83

ドットを使ったシーケンサを使って、多人数でリアルタイムに入力を反映させて音楽を作り、それをそのシーケンス情報を映像(画面左上の球体)に表現するというアプリケーションです。(写真は発表中にリアルタイムに動かず四苦八苦しているところ。発表の中継で使っていたアクセスポイントとデモの時に使ったアクセスポイントが同じだった為かもしれません、、、すみませんでした)
単純にドットで入力したシーケンスを演奏するだけでなく、演奏にはモードがあり自動で短調、長調、ブルース等にスケールを変えることができる。技術的にはWeb MIDIをはじめ、AngularJS、Firebase、SVG、WebGLが使われていた。
ハッカソン終了後にうらばなしのスライドのを公開してくださいました。

コミュニケーション

Distributed Sequencer

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

1台のサーバ複数台の音が出るクラアンとを接続されていて、サーバからのメッセージによってクライアントが鳴る、というアプリケーションです。発表の中継で使っていたアクセスポイントとデモの時に使ったアクセスポイントが同じだった為か複数台を接続してのデモが出きずですみませんでした。
ハッカソン終了後に詳細な内容のブログを書いてくださいました。

初心者

はじめてのWeb MIDI API

by @kubotaku1119

初心者でもこんなに簡単にできますよ、というところを発表してくれました。

チューター

Foot Drum

by @sascacci

KORG CLIPHIT(クリップ型のトリガーをつけた物が打楽器になってしまう楽器)のトリガーとRoland TM-2(ハイブリッドドラム向け音源)を使ったアプリケーションです。足にトリガーを取付け、それによって音を出し、さらにブラウザ側に映像を表示することができます。「メーカとしては他社製品と混同して使う場合は自己責任でお願いします」との一言で会場からは笑いが起こりました。

演奏するリズムマシン

by @aike1000

直線ではなく、円周上に音源を配置するリズムマシンです。波形も円周上に表示されます。直線のリズムのループを直感的に表したリズムマシンです。

LiveBeats MIDI Plugin

by @g200kg

コマンドで音楽を創っていくLiveBeatsにMIDI入力を追加して、MIDIデバイスをギターのように構えて演奏していまいます。

全ての発表終了後に「アイデア」、「技術」、「完成度」の基準でチューター並びにスタッフで採点を行い以下の3チームを表彰させていただきました。どの作品も技術的にも、完成度的にもとても高く甲乙つけがたい状況で大変悩みましたが、以下の3つを表彰させていただきました。

  • Scratch by kaisei, yokmama:親子での絵とプログラムのコラボレーションとお子さんが挑戦されていた姿を評価させていただきました。
  • ドット絵シーケンサ by @ussy9、@_likr、pastelInc、@armorik83:たくさんの技術を取り入れながらも、多人数でのリアルタイム入力シーケンサ、スケール自動変換機能が実装されていて、3つの基準全てを高く評価させていただきました。
  • Distributed Sequencer by @mohayonao, @esperia09, @isocoda, @yasuraok:「アイデア」が素晴らしく、また「技術」、「完成度」もとても高く評価させていただきました。

おわりに

今回で4回目を迎えてWeb Music ハッカソンでしたが、回を重ねる毎にレベルの上がり本当に驚いています。また次回も開催できたらいいなと思っておりますので、その時にまたお会いできることを楽しみにしております!

謝辞

今回は関西で初めての開催ということで予想ができない部分が多々あったのに加え、台風の接近も重なって当日まで本当に不安でした。しかしながら、参加表明下さったほとんどの皆様にご来場&ハックしていただくことができたことを心からうれしくおもうのと同時に、心から感謝申し上げます。また、今回関西での開催をするにあたって会場、告知等を行ってくださいましたGDG京都の蔵野さん、GDG神戸の多田さん、野田さんをはじめ当日お手伝いいただきましたスタッフの皆様、また何より会場をお貸しくださったKRP 寺戸様にはこの場を借りて改めてお礼を申し上げます。ありがとうございました。
また、いつもながら遠路はるばる札幌よりお越しくださったチューターの @aike1000さん、横浜から駆けつけてくださった @g200kgさんにも心から御礼を申し上げます。
皆様の熱い心で成り立っているハッカソンだと思っています。今後とも熱い想い、ご支援をよろしくお願いします。

おまけ

翌日は京都観光してきました。今回の阿修羅なみでゃっぴーの元になった三十三間堂で観音様の多さに圧倒され、清水寺、銀閣寺、金閣寺と回って、最後の金閣寺のゴージャスぶりに絶句して東京に帰ってきました。