Introduction of Web Audio, Web MIDI at Meetup with W3C Audio WG people at Sapporo.

1. Web Music Developers Meetup
＠Sapporo
Ryoya KAWAI

2. ● W3C
○ World Wide Web Consocium (USA、France、日本、中国)
○ Webブラウザの仕様を策定している標準化団体
○ 2015年10月時点で会員は405
○ 1994年10月 by Tim Berners-Lee
○ 当初は研究状況、論文を共有する、探す基盤として作られた
● Audio WG
○ Web Audio/MIDI APIを標準化しています
○ 2011年3月25日に設立
● Technical Plenary / Advisory Committee
○ W3Cの年次集会
○ 普段は電話会議（AudioWGは隔週にボストンのお昼）
○ 2015年は札幌で開催（明日から）
TPAC（てぃーぱっく）って何？

3. 札幌でMeetupしよう！

4. 活動
● ヤマハに所属、AMEIのメンバー
● HTML5Experts.jp #55
● Web Music Developers JP 管理人
かわい りょうや
google.com/+RyoyaKawai
@ryoyakawai
得意技
● Web Audio API, Web MIDI API
● Polymer (Web Components)
● 大外刈、クロール
みでゃっぴー by @g200kg
(Unofficial Web MIDI API Mascot)

5. Web Audio API

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

7. すぐにできること
● オシレーター
● オーディオバッファソース
● ゲイン
● フィルター
● ディレイ
● スクリプトプロセッサー
● パン
● コンプレッサー
● コンボルバー
● アナライザー
● ウェーブシェイパー
用意されているNode
Node Graph
オーディオ
バッファソース
ディレイゲイン

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

9. ブラウザで音って楽しそうでしょ？
― なぜかは分からないけどw

10. Web Audio APIを利用可能なブラウザ
iOS Mini
出展： http://caniuse.com/#feat=audio-api
2015/10/22 17:08JST

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

12. ブラウザがMIDIをサポート？
＠ITさん
DTM Station：藤本健さん

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

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

15. 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
約 452, 000件 (0.33秒)
残りのメッセージは検索で！
midi メッセージ

16. <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デバイスの接続
● デバイスを列挙する
● メッセージを処理する

17. Web MIDI APIを利用可能なブラウザ
iOS Mini
出展： http://caniuse.com/#feat=midi-api
2015/10/22 17:08JST

18. MIDIデバイス持ってない・・・
● MIDIデバイスなくても遊べますっ！
「MIDIデバイス準備不要、Web MIDI APIの基礎」
HTML5 MIDI 準備不要

19. Web Audio & Web MIDI
を使ってみよう！

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

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

22. 信号処理：その２：コードの解説
<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)：電圧制御フィルタ

23. FM シンセサイザー

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

25. 信号を扱う：その２：コードの解説
<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 の周波数の比率
● Modulator のアウトプットレベル
● Moduator のフィードバック

26. ● Offline：Serviceworker
「ブラウザのBackgroundで動作するJS実行環境」
Offlineとかスマホとか！
Illustrated by
Kinyko Yasuda (Google)
http://goo.gl/eQgEC7
● アイコンから起動：Web App manifest
○ 動作時の向き、Splash等を制御可能
デモ1 デモ2
Camera

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

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

29. ● 標準化された環境
○ W3C
● 開発環境
○ ブラウザ ＆ テキストエディタ
● 言語
○ Web標準言語（HTML, CSS , JavaScript）
● その他
○ APIが豊富&進化が速い
○ オープンだから情報が豊富！！
WebというPlatformの特徴

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

31. ● Web Music Developers JPに相談だ！！
○ Google Groups
○ Google+
Web Music Developers JP
Web Audio/MIDIで困ったら...

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