1. Web Audio API、 Web MIDI API
を使ったサウンドプログラミング
ヤマハ 株式会社 かわい りょうや

2. かわい りょうや
google.com/+RyoyaKawai
pepper x VOCALOID
Open Research Forum @KeioWeb Music ハッカソン

3. Web Audio API

4. Webブラウザ上で
信号処理を可能にした API

5. ● API自体の特徴
○ JavaScript で音そのものを作成＆加工
● Web Platformだから受ける特徴
○ 出どころが確実でOpenな仕様（W3C）
○ APIについてはPlatform依存がない
● API策定の方針
○ Developer 思考
○ Native と同等な API を目指す
○ モジュール思考（Web Audioでは ”Node”と呼ぶ）
特徴

6. モジュール（Node）思考
● オシレーター
● オーディオバッファソース
● ゲイン
● フィルター
● ディレイ
● スクリプトプロセッサー
● パン
● コンプレッサー
● コンボルバー
● アナライザー
● ウェーブシェイパー
用意されているNode
Node Graph
オーディオ
バッファソース
ディレイゲイン

7. デ モ
Node Graph
ディレイゲイン
ピッチシフト

8. 変更点
AudioWorker (旧：ScriptProcessor)
● 遅延の軽減を目的
○ worker thread で動作させる

9. 利用可能なブラウザ
Ready! NOT yet...Prepearing!

10. やってみよう！

11. ● 音量と音階を変える
信号処理：その１
デ モ

12. 音色を変更 ＝ 波形を変える

13. アナログ シンセサイザー

14. ● 波形を揺らしたり・削ったり・足したり
信号処理：その２
デ モ

15. 信号処理：その２：コードの解説
<script type="text/javascript">
var ctx=new AudioContext() || webkitAudioContect();
var osc0, osc1, lfo, vcf;
osc0=ctx.createOscillator(), osc1=ctx.createOscillator();
lfo=ctx.createOscillator();
vcf=ctx.createBiquadFilter();
osc0.connect(vcf);
osc1.connect(vcf);
lfo.connect(osc0.frequency);
lfo.connect(osc1.frequency);
lfo.connect(vcf.detune);
vco0.start(0), vco1.start(0);
lfo.start(0);
</script>
● VCO(Voltage Controlled Oscillator)：発振機
● LFO(Low Frequency Oscillator)：低周波発振機
● VCF(Voltage Controlled Filter)：電圧制御フィルタ

16. FM シンセサイザー

17. ● 周波数をいじってみる
信号処理：その３
デ モ

18. 信号を扱う：その3：コードの解説
<script type="text/javascript">
var ctx=new AudioContext() || webkitAudioContect();
var mod, car;
mod=ctx.createOscillator(), car=ctx.createOscillator();
mod.connect(car.frequency);
mod.start(0), car.start(0);
</script>
音色は以下の3つで決定
● Carrier、Modulatorの周波数の比率
● Carrierのアウトプットレベル
● Carrierのフィードバック

19. Web MIDI API
５DIN (Deutsches Institut Fur Normung)

20. 音源モジュール
Webブラウザと
MIDI機器を直接接続する 為のAPI
MIDIコントローラ

21. ● API自体の特徴
○ JavaScript で MIDI 機器と接続ができる
● Web Platformだから受ける特徴
○ 出どころが確実でOpenな仕様（W3C）
○ APIについてはPlatform依存がない
● API策定の方針
○ Developer 思考
○ Native と同等な API を目指す
特徴

22. 利用可能なブラウザ
● iOSでのWeb MIDI API
○ Web MIDI Browser 上で動作します！！
web midi browser ios

23. MIDIって？
● Musical Instrument Digital Interface
○ 演奏データを機器間でデジタル転送する規格
■ 物理的な送受信回路
■ インターフェイス
■ プロトコル
■ ファイルフォーマット、等
MIDI
● Musical Instrument Digital Interface
○ 演奏データを機器間でデジタル転送する規格
■ 物理的な送受信回路
■ インターフェイス
■ プロトコル
■ ファイルフォーマット、等

24. Status Byte (80h-FFh) Data Byte (00h-7Fh)
● MIDIメッセージは16進数
● 最低限知ってるとよいメッセージ
○ 音を出力 noteOn 9xh <noteNo> <velocity>
○ 音を停止 noteOff 8xh <noteNo> <velocity>
○ 音色変更 programChange Cxh <no>
○ SysEx System Exclusive 0xF0 … 0x7F
MIDIメッセージ
midi メッセージ
約 487, 000件 (0.37秒)
残りのメッセージは検索で！

25. <script type="text/javascript">
var midiins=[], midiouts=[];
navigator.requestMIDIAccess.then({sysex:true})(function(access) {
var inputIterator=access.inputs.values();
for(var o=inputIterator.next(); !o.done; o=inputIterator.next()) {
midiins.push(o.value);
}
var outputIterator=access.outputs.values();
for(var o=outputIterator.next(); !o.done; o=outputIterator.next()) {
midiouts.push(o.value);
}
}, function(msg){ console.log(msg);});
</script>
<script type="text/javascript">
midiins[0].onmidimessage=function(event) {
console.log(event.data);
}
midiouts[0].send([0x90, 0x55, 0x7f], 0);
</script>
MIDIデバイスの接続：コードの解説
● デバイスを列挙する
● メッセージを処理する

26. x-webmidi
3秒でMIDIを使う準備を整えたい！

27. x-webmidi
WebMIDIのPolymerコンポーネント
- 機器のリスト、入力、出力を行うことが可能。
x-webmidi

28. やってみよう！

29. デ モ
アナログ・シンセに接続してみる

30. FM シンセに接続してみる
デ モ

31. Webブラウザ上に
楽器を作れちゃいました！
Photo by Ed Christensen
いや、ちょっと待てよ、、、

32. 昔からできたよね？！
<embeded src=”gegege.mid”>
<audio src=”hoho.ogg”>

33. Photo by Giulia van Pelt

34. 音楽系アプリが動作する
Platformが増えた！
Photo by Giulia van Pelt

35. ● 開発環境
○ ブラウザ（debug 環境付き＆実行環境）
○ テキストエディタ
● 言語
○ Web標準言語（HTML, CSS , JavaScript）
○ コンパイルなし！
● その他
○ APIが豊富
○ 進化が速い
○ オープンだから情報が豊富！！
WebというPlatformの特徴

36. ● User視点
○ アプリのインストール不要
○ Nativeと変わらない（まだ制限が多いかも・・・）
● Developer視点
○ 開発のハードルが格段に下がった（自由化！）
○ 知識、ノウハウも得やすくなった
● マーケット
○ 音楽以外の分野との親和性が高まり、イノベー
ションが起きやすく、またそのスピードも上る
2つの視点とマーケット

37. まずは触ってみよう！

38. ● Web Music Developers JPに相談だ！！
○ Google Groups
○ Google+
Web Music Developers JP
実装に困ったら...

39. ご静聴ありがとうございました！

40. アンケートにご協力お願いします。
http://bit.ly/html5C201501