GTUG Girls Meetup #19 「Web Audio APIを使ってみよう」 でハンズオンをしてきました。お題はWeb Audioです。ハンズオンということで、ハッカソンで初心者の方にやってもらっているチュートリアルをそのまま使おうと思ったのですが、せっかくだからもっと楽しくやれるようにできないか?と思ったのと聞いてくださるのが全員 Girls なのでいろいろ考えました。
考えた結果 「もうちょっと使いやすく」 という方向で進むことにして、見た目をキレイにしてみました。そして、できたのがこちら。

内容は全く同じなんだけどガワをつけたら、よりそれっぽくなりました。機能的には、「メニューを選ぶとサンプルアプリを起動」、右上メニューの緑のボタンは「アプリのリロード」、青の鉛筆ボタンは「虫食いコード表示」、赤目玉ボタンは「完成したコード表示」という形にしました。また、アプリを表示すると左上に github のコードページへのリンクも表示するようにしています。(技術不足のためPrettyPrintでインデントを上手に表現できなかった為。。。)

そしてWeb Audioの開発はWebサーバが動いていたほうが何かと便利だったりします。例えば音声ファイルの再生だったり、getUserMedia()でのマイク・カメラの利用には必須だったりしますが、誰しもが短時間で作れるわけではないので Chrome Dev Editor が俄然便利です。Chroem Apps(つまりChrome上で動作)であって、Webサーバもお手軽に立てられて、 github からもボタン1つで clone することが可能です。ハンズオンが終わってから @toyoshim さんに教えてもらって気がつきました。。。次に機会があるときは最初から Chrome Dev Editor を使うことにします。

ということで結論、手っ取り早くWeb Audioを試したい方は Chrome をインストールして Chrome Dev Editor を Chromeにインストール。そして https://github.com/ryoyakawai/gtuggirls-webaudio.git を Clone しましょう!

2014年9月13日に Web Music ハッカソン#3を行いました。今回もGoogle さんと Web Music Developers JPの共催、AMEI(音楽電子事業協会) さんの後援です。

当日の参加人数は40+名で、合計26作品+1曲がハックされました。 それらのハック中の様子も音楽系ハックならでわで、絶えずあちこちから「ビー」とか「ブー」とか、時にはポケミクの声がしたり、また会場にはAMEIさんから提供していただいた楽器もたくさんありハックに利用したり、また休憩中に楽器単体で、または別の機器と接続をして楽しみながらアイデアを模索したり、と音楽系ハッカソンならではの出来事があちこちで発生していて非常に活気のある奇想天外なハック会場になっていました。

また11月16日〜22日に慶応義塾大学SFC研究所主催でORF(Open Research Forum)にて「Webと音楽」をテーマにW3C(World Wide Web Consortium)/KEIOが1セッションを行う中で、今回のハッカソンの様子、また優秀作品の紹介を予定している関係で、ぜひ実物も見たいとのことでプレゼンタイムにはW3C/KEIOより村井 純先生(写真左)、中村 修先生(写真右)をお招きしての開催となりました。

そんなスゴイ状態の会場でハックされ、発表された作品は大雑把に以下の5つに分類のように思います。

  • MIDIデバイスを含む外部デバイス(野菜も含みます!)と接続をした作品、
  • Web ServiceのAPIや、コマンドを使う作品
  • 自動またはユーザ参加型作曲を実現した作品、
  • VJ、映像系の作品
  • ゲーム

どの作品も独自のアイデアが光り、そして何よりWebブラウザでの新しい音楽、アートの楽しみ方を巧みにWebブラウザ上に表現していると感じる作品ばかりでした。ここではその中から優秀作品5つをご紹介します。

最優秀作品、チームHimakanによるFaceTrackingEffectorです。[App] [Source] Webカメラからの映像から顔をトラッキングして画面に表示、さらに再生している音声のフィルタをかけてるというVJ作品になります。プレゼン内では紹介されていませんでしたが、トラッキング場所が実は手元のKaoss Padのパッド部分に反映されています。


2つ目は @okame_okame さんのエレキ木魚です。[Source]
木魚側にArduinoを使ったTriggerからの信号を、PC側にはChromeAppsなアプリでSerial DeviceのAPIを使って受取り、Web Audio APIで作った音を鳴らす、という仕組みの作品です。さらに、木魚にはセンサが入っていてその傾きでも音に変化が加わったりします。


3つ目は kirinsan.org さんのオタマトーンの音をブラウザで拾いPitchを検出、それをMIDIメッセージに変換してMIDI音源を鳴らすという作品です。[App] [Source] MIDI音源の音色は手元のスマホから変更が可能だったりユーザビリティに関してもコダワリが詰まっていました。


4つ目は コボリ マサユキさんにより電車でGo!です。 ゲーム機用の電車でGo!のコントローラをMIDIコントローラに改造をして、プラレールを動かし、それに合わせてブラウザ側では発車音等を鳴らすという作品です。


5つ目は @tadfmac さんによる野菜を触ることで映像が動くという作品です。 ナマ物(野菜、果物)をトリガーにしてArduinoでMIDIメッセージに変換をしてブラウザ側ではWeb MIDI APIを使って映像を動かす、という作品です。さっそく電子回路側の解説を公開してくださっていますので、気になる方は御覧ください。


そして+1曲はこちらです。 音源にポケミクを使ったWebMusicの歌!!

作詞、作、編曲:meguru (JSPA Web MIDI研究委員会)


最後に技術的な部分のお知らせです。Chromeに実装されているWeb MIDI APIが更新されます。その説明をGoogleの @toyoshim さんにハッカソンの開始時にしていただきました。そのスライドをシェアさせていただきます。スライドの中に当面パッチとして使えるソースコードの例もありますのでぜひ参考にしてください。

Web MIDI API update from Takashi Toyoshima


ご参加いただきました皆様、本当にありがとうございました。これからもWebとブラウザと音楽・アートとワタシの世界「Web Music」を盛り上げて行きましょう!!

最後に参加者全員で記念撮影!お疲れ様でしたっ!
次回に乞うご期待!!

  • Q. Chromebook で Web MIDI API は動く?
  • A. Canary BuildのChromeOSにすると動作します!!

ということでやってみました。
(※ Chrome への Web MIDI API の実装について2013年末の状況はとよしま語録の通りです。)

まず、 Chromebook を Stable から Canary Build へ移行する必要がありますので、Developer Modeにします。手順は以下です。

  1. Recovery Modeで起動
    [Esc]+[Refresh]+[Power] を同時押しで起動。
  2. Developer Mode を有効にする
    起動したら、[Ctrl]+[D] を押下して、次の画面で [Enter] を押下してDeveloper Modeへ。
    Developer Mode への初期化に10分程度かかりました)
  3. Chromebookのセットアップ
    再起動すると見慣れない画面がでてきますので、[Ctrl]+[D] で起動先に進んでください。先に進むと、Chromebookの初期設定画面が出てくるので、通常通りセットアップを行います。
  4. Canary Build に移行する
    ブラウザを起動して [Ctrl]+[Alt]+[T] で “crosh” (Chrome OS Developer shell) を開く。
    crosh に “shell” と入力し、その後 “sudo su” します。
    続けて以下の2行を入力すると、Canary への移行が始まります。(完了までには10分程度かかります)
$ update_engine_client --channel=canary-channel;
($update_engine_client --channel=stable-channel; (to get it back))
update_engine_client -update

以上で Canary Build への移行作業完了。

次に、Web MIDI API を使うときの(今のところの)お約束のフラグを変更します。
ブラウザの URL を入力するテキストボックスに chrome://flags/#enable-web-midi を入力して “enable” にして再起動です。

これで Chromebook で Web MIDI API を使う準備が整いました。あとは、USB-MIDI機器を接続して Web MIDI を使ったアプリケーションにアクセスすれば機器を認識してくれます。
ここでは eVY1 Shield専用ウェブアプリ で動作させてみました。

Mac、Windows で動作させたときと変わりなく動作しました!!

このChromebookですが、2014年3月13日現在、日本では個人輸入等をしないと手に入りませんが、2014年4月に来るかも!な記事も出ています。値段は3万円前後ですので、DAW ウェブアプリケーションとか出現したとしたら、本当に手軽にDTMが始められそうですね^^

ちなみに、今回利用した Chromebook は HP Chromebook 11 です。

English Version

10月19日に引き続き Web Music ハッカソン #2 を Google さんと Web Music Developers JPの共催、AMEI(音楽電子事業協会) の後援で開催しました。

今回の参加者は30+名で、合計20を超える作品が生まれ、最後にプレゼンタイムをもちました。ヒカリモノアコースティック楽器(缶)Twitter連携Google Docsスプレッドシート と幅の広い作品で、ここからWeb Audio API(信号処理を行う音楽系のAPI)、Web MIDI API(MIDI機器と接続しコントロールするAPI)のポテンシャルの高さを再認識できる会になったと思います。

ここでは当日参加してくださった初心者(Web Audio API、Web MIDI API初心者)の方がどのような作品を作ったかを少し紹介します。その他の作品は Google のえーじさんブログにお任せします〜。
初心者の皆様にはチュートリアルを実施いただくことで慣れてもらいました。チュートリアルは、虫食いになっているソースコードに、アプリケーションを作るのに重要な method を入力していってもらうようになっています。2時間で終えられた方から、挫折された方がいるみたいですね。それでは早速作品を見てみましょう!(画像はYouTubeに開始時間指定でリンクしています)

けんこふさんのドローバーオルガンです。音源部を実装されて、鍵盤部分は webaudio-controls を使って実装されたとのことです。



つづいてみでぃゃっぴーの声を作って音声の再生+作動モーションセンサで動きを検知してMIDIで音声の再生をする作品です。ゆるい声でなかなかおもしろかったですww

こういった作品をチュートリアルから初めて、数時間で完成されていますので、使うハードルはそこまで高くないということがお分かりになると思いますので、気になる方はぜひ挑戦してみてください!


この先は初心者からカテゴリを変えます。 まずはWebブラウザの枠を超えた「ハードウェアなやつ」です。

MIDIメッセージを赤外線信号に変えてハードウェアを制御するアプリとパルス信号を作成してサーボモータを直接制御するアプリです。


次は今回から登場したのがゆるキャラ「みでぃゃっぴー」です。g200kg さんがデザインされた W3C非公認のWeb MIDI API のゆるキャラです。そのアプリケーションがこちら。

マスコットも3Dプリンタで作成されています。

ステッカーはAMEIで作らせていただき、当日参加者の皆様にお配りをしました。

というところで、何が起こるかわからないのがハッカソンだと思いますが、Web Music ハッカソンも第1回目からいろいろなことが起こり、そして第2回目にはWeb MIDI APIのゆるキャラが出てきました。もちろん、アプリケーションのアイデアも楽しく、ハッキングもプレゼンタイムも楽しんでいただけたと思っています。
懇親会では、いろいろなアイデアを頂いております。今後も継続的に開催をしていきたいと思っていますので、ぜひ今後の参考にさせてください。
次回以降のハッカソンについてです。日程は決めていませんが、行う予定でおりますので初心者の方も躊躇せずぜひご参加いただければと考えております。 お知らせは、Web Music Developers JP@Google GroupsWeb Music Developers JP@Google+ Community などで行いますので気になる方はご参加ください!

それでは、また次回お会いしましょう!!

最後に、今回チューターとして参加してくださった方々の紹介です。

  • @aike1000 こと藍 圭介さん : Web Audio API、 Web MIDI API
  • @g200kg こと新谷垣谷さん: Web Audio API、 Web MIDI API
  • @komasshu こと小松健作さん:WebRTC
  • @Tukimikage こと仲裕介さん:WebRTC

ありがとうございました!!

(次回は「みでぃゃっぴー」の着ぐるみが会場にいるかもですよ〜!!(予定は未定ですがw))

P.S. Web Music ハッカソン #2の模様は、工学社 月刊 I/O 2014年3月号(2014/2/18発売予定)に掲載予定です。

日本語版はこちら

On January 18th 2014, Google Japan and community of Web Music Developers JP had a Hackathon. And AMEI(Associatin of Musical Electronics Industory) is a supponsor of this event.
This is a second time event, the first one was held on Octobe 19th 2013.

The event attendees are over 30, and they invented about 20 applications within one day. The end of this event we had presentation time of their applications. Those application is really unique and having a plenty of variety. For example, corroboration of audio and light, acoustic MIDI Controller(Can), corroborate with Twitter, corroborate with Google Docs Spread Sheet. I think this hackathon gave us the chance to realize that how much are Web Audio/MIDI API having a high potential to express things.

In this blog, I introduce how did beginners(beginners of Web Audio/MIDI API) invent applications. Other applications are introduced in Google agektmr’s blog.
In that day, I have provided tutorials(Web Audio/MIDI API) to learn how to invent applications with using method in the Web Audio/MIDI API. Some attendees had finished the tutorials in 2 hours, and some people had started inventing application without to finish following tutorials.
Let’s see the applications from begginers!! (the images are linked to YouTube movie which is specified starting point)

The draw bar organ which was invented by @kenkov. He had invented its tone generator, and musical keyboard parts are invented with using webaudio-controls.



The next one is an application that using motion censor to play his original MIDIappy’s voice by following the PC’s motion. It was fun, because the MIDIappy’s voice is so cute.

These applications are invented beginners who learned APIs from tutorial in a few hours. From this fact, I think it is not too much to say that using these APIs are NOT so difficult. If you are interested in these API’s, I want you to challenge to invent applications.

Topics from here is NOT beginners.
The first one is invent application using hardware beyond the browser’s functionality.

</div> There was two of them. One is the application that changing MIDI message to infrared light to control hardwre, and the other is create pulse sign by Web Audio API and send it to servo motor to control.

The next one is a mascot, which is not certified by W3C, and it came out from this event. The name is “MIDIappy”, which designed by @g200kg(he is one of an expert, not beginner.). The application is this one.

He brought MIDIappy’s figure which is created by 3D printer.

AMEI created MIDIappy labels, too.

Nobody knows what will happen in hackathon. Actually these Web Music Hackathon had lot of things happen, and Web MIDI API’s mascot was came out at this moment. aThe ideas of applications are great and are unique, so I think attendees enjoyed hacking, and also enjoyed presentation time. Web Music hackathon had not been scheduled yet, but we may will have Web Music Hackathon #3 soon. So I hope lots of attendees come to the event, and for beginners, do not hesitate to come to the event!!

I will inform you about next event on Web Music Developers JP@Google GroupsWeb Music Developers JP@Google+ Community, so if you are interested in these event, please join the group.


OkeyDokey, see you next time!!

Ultimately, I want to say thank you very much for who came to event as tutor!!

  • @aike1000 (Keisuke Ai) : Web Audio API、 Web MIDI API
  • @g200kg (Mr. Shinyagaito): Web Audio API、 Web MIDI API
  • @komasshu (Kensaku Komatsu):WebRTC
  • @Tukimikage (Yusuke Naka):WebRTC

Thanks again!!

(Next time, MIDIappy might come by cartoon-character costume.)

P.S. Web Music Hackathon #2 is scheduled to be published magazine, Kogaku-Sha Monthly I/O of 2014/03(2014/02/18 on sale)