Ryoya Kawai Reading time ~1 minute


2019年5月7〜9日まで、毎年Google社が米国カリフォルニア州で開催している開発者会議「Google I/O」に参加してきました。

その中でも「これは！！」と感じたセッションを紹介していこうと思います。

第一弾は「Sonic Boom! Audio Programming on Android and Chrome」です。
「Step by StepでAndroid、Webでのコーディング方法を追うことができる」という意味で、開発を行うのには非常に参考になると思っています。
（デジタルハーツ所属としての参加なのに、アプリケーションテストの内容でなくてごめんなさい😅）

セッションの動画は↓です。

セッションの概要

端的に説明すると、UIパーツはそれぞれのプラットフォーム（AndroidとWeb）で開発するものの、オーディオエンジンはC++で書かれたコードを共有して同じアプリを ライブコーディングで作ってしまう、という内容です。
C++で書かれたオーディオエンジンを走らせる部分を技術用語で表現すると、

で実行することになります。

それでは、内容を説明してきます。（動画のタイムラインと前後する部分があります）

プレゼンター

背景など

AndroidとChromeの話を同時にするのは少し奇妙だが以下のような同じ構造だったり、背景があるとのことです。

  • システム：Callbackを基本としたオーディオを再生する仕組みを持っている
  • 遅延：Audio Latency（往復の）が約20ミリ秒（Pixelデバイス）
  • MIDIサポート：AndroidはMidiManagerAPI、またAndroid QからはハイパフォーマンスなAMidiが搭載され、Chromeでは2015年からWeb MIDI APIでサポートされている
  • Activeユーザー：AndroidもChromeもそれぞれ20億人以上

そしてこれらの利点を活かしている1つの良い例がBandLabというマルチプラットフォームで提供されている音楽制作アプリっとのことで 紹介されています。（2:49）
BandLabはSocial Music Platformで、クロスプラットフォーム（スマホ、Web向け）に提供しており、録音、編集の作業を物理的な場所、プラットフォームを問わず どこでも行うことが可能。そして作成したデータはクラウドに保存される仕組みです。現在700万のユーザが登録しており、200万の曲が毎月がこのプラットフォームに 保存されているそうです。
BandLabが目指す世界は、どこにいても物理的場所、デバイス、時間等の境界を考えることなく音楽を作ることのできる環境を提供し、 音楽制作を更に民主化すること、とのこと。

ライブコーディング

実装する対象の条件はは以下の通りです。

  • オーディオエンジンはC++のコードOboeを利用
  • MIDIで操作できるように実装

また、プラットフォームはAndroidとWeb（Chrome）です。

実装完了しているコードではありませんが、コードがGitHubに公開されていますので、 細かく説明するよりもコードを片手に動画を見たほうがわかりやすいと思うので時間を記録していきます。

＊ Android側のコーディング

オーディオエンジンを実装 (7:05 - )

MIDIデバイスと接続 (27:27 - )

＊ ブラウザ側の説明とコーディング

ここでブラウザとC++で何が起こるのか？についての説明が入ります。(12:15 - )
先程Android側で実装したSynthesizer.hを使うけど、これをLLVMベースのコンパイラであるEmscriptenにコンパイルしWeb Assemblyのsynthesizer.wasm.jsを生成する。 このsynthesizer.wasm.jsはSynthesizer.hで公開メソッドとして持っていたsynth.noteOn(), synth.noteOff(), synth.render()を同じく 公開メソッドとしてして持つことになるが、残念ながらここだけは自動では生成してくれないのでEmscriptenでAPIをバインドするC++のコードを1つ追加することになります。

続いてブラウザ側で鳴らす方法、それはJavaSciptからWeb Audio APIでAudioレンダリングを可能にするAudio Workletを使います。 なお、このAudio Workletはブラウザのメインスレッド上で動作はしないが、メインスレッドと同調して動作するスレッドです。
具体的には以下の流れで動作をさせることになります。

  • synthesizer.wasm.jsをAudio Worklet ProcessorでWrap
  • Audioスレッドで動作している↑とメインスレッドとはPortと呼ばれる仕組みでデータのやり取りを行いブラウザで発声


ここからがコーディング。

出来上がったところでセッション

同じオーディオエンジンで作製したAndroidとWebのアプリでのセッション。(32:05 - )

事例の紹介

物理的場所を問わず、どこからでも、誰でも、また共有前提として利用できるプラットフォームであるWeb、 そしてそのプラットフォーム上の音楽制作ツール、とてつもなく大きなコミュニティを持つAndroidが音楽という国境のないツールに対して 音楽制作、またハイエンド・オーディオの分野でどれだけのポテンシャルを持っているか、の裏付けの説明が主でした。

・Propellerhead

25年間、音楽向けのアプリを作っている会社でReasonがもっとも知られているソフトウェア。WindowsとmacOS向けのソフトウェアがあり、このソフトウェアシンセサイザをWeb Assenblyを使ってブラウザ上で動作するように移植した。 ブラウザで動くことによって、より多くの人が音を使って自らを表現する機会が増えるといいな、というのが希望がPropellerheadにはあるとのこと。

・IZOTOPR

信号処理のプラグインを開発する会社であるが、Spire Studioというモバイルの録音デバイスを発売した。 このデバイス向けのAndroidアプリも公開したところ40％売上が上がった。この事実からもAndroidユーザがハイエンドのオーディオハードウェアを手にすることを 求めていることが分かると思う。

・Music World Media

数年前にパリで生まれたとても小さい（tiny）Startupで、いろいろなアプリを作っている。 その結果として過去12ヶ月間で235カ国の4500万のAndroidユーザに新規でリーチすることができた。 このことからもAndroidには音楽業界においても多くのユーザにリーチできるポテンシャルを持っていることが証明できていると思う。

・Ableton

Web上での音楽制作ツールは増えてきている。そしてAbletonは音楽制作の教育ツールを公開している。 ここから市販の制作ツールであるAbleton Liveも学ぶことができる。

終わりに

まとめです。

  • AndroidもWeb（Chrome）の両方がリアルタイムオーディオレンダリング、そしてMIDIサポートが可能
  • AndroidとChromeで同じソースコードを使うことが可能
  • 商業的にも、Android、そしてWebから多くのユーザにリーチすることが可能
  • 音楽には国境はない。どこにいようとも、文化背景・経済状態がどうであろうとも境界はなく、だからこそ人々が境界なく対話することが可能
  • 皆さんのプログラミングスキルでどんな音楽を作ることだってサポートすることが可能

ということから、聞くだけでなく、それを使ってコミュニケーションをすることをしてきましょう！と締めています。

個人的な感想

C++のコードからWeb Assemblyに移植するのにはヒトテマ必要であることはライブコーディングからは分かりました。 そして「Web Audioでは音楽アプリはレイテンシーが・・・」と指摘されている部分にWeb Assemblyは一石を投じるのも遠い未来ではないように感じる、 同時にWeb Assemblyを使うことは、そこまで難しいことでもないことを感じることができたセッションであった、 という意味では非常に意味のあるセッションだったと感じています。

さてセッションの主役のWeb Assenbly、Web Audio/MIDIの仕様を決めるW3C、その年次会議であるTPACの2019年開催は日本の福岡です。 その前後にいろいろなイベントが日本で開催されるかもで、今からワクワクしちゃいますね！

Ryoya Kawai Reading time ~1 minute

ガパオごはんを作ったときに「この味で野菜炒めにしても美味しいんじゃないかな？」と思い立って作ったらやっぱり美味しかったので、Cookpadにメモりました。 ちょっとエスニックな野菜炒め、という感じかな。

「もやしと豆苗のガパオ風炒め」のレシピはこちらです。

番外編

ここからはCookpadには載せていませんが、、、
米国で蕎麦を炒めた料理とかあったけどだいたい微妙な味だけど「この野菜炒めならイケるんじゃないか？」と思って混ぜたのがこちら↓。

味は、、、おすすめ出来ませんww
食べてて、「蕎麦を炒める」だなんてなんて米国的発想をしてるんだ、、、と自分にビックリでした😅

Ryoya Kawai Reading time ~1 minute

x-webmidiとして公開していたPolymerのエレメントをES6 Modulesに変更しxwebmidi.jsとすることにました。
理由は簡単でHTML ImportがChromeから削除されてしまうからです。

コードはGitHubにあります。

xwebmidi.jsでできることは以下です。

  • コンピュータに接続されているMIDIデバイスのリスト化
  • 接続・切断したMIDIデバイスを自動でデバイスリストから追加・削除
  • MIDI InputデバイスからのMIDIメッセージの受け取り
  • MIDI OutputデバイスへのMIDIメッセージの送信
  • MIDI Messageを自動でParse

まだあるかもしれませんが、これくらいが主な機能になります。

できる限り今までのx-webmidiと同じように簡単に実装できるようしています。詳細なREADMEを出来ていませんが、このHTML、JavaScriptを書くとブラウザ上に↑の機能を実装の土台ができあがります。

<html>
  <head>
    <link rel="stylesheet" href="./xwebmidi.css">
  </head>
  <body>
    INPUT: <select id="midiin" class="xwebmidi-select-midi"></select>
    <br>
    OUTPUT: <select id="midiout" class="xwebmidi-select-midi"></select>

    <script type="module">
     import { xWebMIDI } from "./xwebmidi.js";
     (async () => {
       const xwm = new xWebMIDI();
       await xwm.requestMIDIAccess(true);
       xwm.initInput('midiin');
       xwm.initOutput('midiout');

       window.addEventListener('midiin-event:midiin', event => {
         console.log(event.detail.data);
         xwm.sendRawMessage(event.detail.data)
       });
     })();
    </script>
  </body>
</html>

ということで、快適なWeb Musicな生活を！！！

Ryoya Kawai Reading time ~1 minute

2019年2月19日に「JSで制御するBluetoothと基板の勉強会（html5jロボット部 第11回 勉強会）」というイベントでBluetooth MIDI機器をWeb Bluetooth経由で利用に関してLTさせていただきました！ 久々でとても緊張でしたがデモも無事に動いてホッとしました。制限時間5分のところを1分超過してしまいすみませんでした＞＜
ありがとうございました！＆スタッフの皆様お疲れ様でした！

今回のアプリはこちらです。コードはここ。
以前作成したアプリをWeb BluetoothでもMIDIに対応してみました。

技術的な詳細はQiitaに記事としてこちらにまとめたので、気になる方はそちらを御覧ください！気がついたら結局ライブラリにしていたので公開することにしました。ご自由にお使い下さい。

日進月歩でブラウザでできることが増えて来て本当にうれしいです。
ウェブって本当にいいですねっ👍

@sascacciさんありがと〜！

Ryoya Kawai Reading time ~1 minute

「こんにちは」
という元所属の上司からの1日前のFacebookのメッセンジャから始まった。
スクリプトがうまく動かなくて「う〜ん、、、」と頭を抱えながらお昼ご飯を食べているときに気がついたメッセージで、スクリプトから意識を離してもらえたのでその点も本当によかったです。さすが元上司、みたいなw

そして、そのメッセージを雑にまとめると「明日来ない？」みたいなありがたいお誘い。旧所属の人が20名規模で集まり、上司の上司（当時の部門長）のご定年の壮行会、ということで2つ返事で「参加します！」と即刻返事をして混ぜてもらいました。印象的な期間の1つである部門だったので会場に入った途端にタイムスリップした感がかなりあって、さらには会場のプロジェクタからは選んだかのように「Back to the future -Part1-」が再生されてて、もうなんというかホントに当時のことが頭の中を駆け巡り、控え目に言って楽しかった。そして、あの選択でなくてこういう選択してたらもっと伸びてたかも、とか頭をよぎったり、普段は感じられない貴重で、かつ、不思議な時間が過ぎました。その時間は本当に一瞬で終わってしまいましたけどね。
さて、今回の壮行会の主役のボスは本当に印象的なボスの1人で

「成功体験は減価償却せなあかんで。」

と、今でも常に心に留めている言葉を教えてくださった関西弁のボスです。今後の変わらぬご活躍を祈念するのと同時に、部下として乗り越える一翼を担えたことを嬉しく思います！ありがとうございました！！
そして、今回のG-tenさん（ボス）の一言

「突き詰めていくと、最後は好き嫌いやで。」

と、また深いお言葉。何となくしかまだ理解はできていないんだけど「そうなんだよね」、「それでいいんだよね」みたいに感じました。この言葉もこれから心から理解できるように精進していこうと思います。

そして、今回は1参加者のつもりだったのが、僕まで壮行されれる側にしていただけました。本当にありがとうございました。嬉しかったです。更にこんな素敵などんぶりまで記念品としていただいちゃいました！あの当時なら確実に「白米用」でしたが、これからは「スープ」または「ヨーグルト」用として使わせていただきますっ！ありがとうございます。

さて、未来に向けて引き続き一歩一歩着実に前進していくよっ！