web audio api, web midi api - 2015 html5 conference
TRANSCRIPT
![Page 1: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/1.jpg)
Web Audio API、 Web MIDI APIを使ったサウンドプログラミング
ヤマハ 株式会社 かわい りょうや
![Page 2: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/2.jpg)
かわい りょうや
google.com/+RyoyaKawaipepper x VOCALOID
Open Research Forum @KeioWeb Music ハッカソン
![Page 3: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/3.jpg)
Web Audio API
![Page 4: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/4.jpg)
Webブラウザ上で
信号処理を可能にした API
![Page 5: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/5.jpg)
● API自体の特徴
○ JavaScript で音そのものを作成&加工
● Web Platformだから受ける特徴
○ 出どころが確実でOpenな仕様(W3C)
○ APIについてはPlatform依存がない
● API策定の方針
○ Developer 思考
○ Native と同等な API を目指す
○ モジュール思考(Web Audioでは ”Node”と呼ぶ)
特徴
![Page 6: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/6.jpg)
モジュール(Node)思考
● オシレーター
● オーディオバッファソース
● ゲイン
● フィルター
● ディレイ
● スクリプトプロセッサー
● パン
● コンプレッサー
● コンボルバー
● アナライザー
● ウェーブシェイパー
用意されているNode
Node Graph
オーディオバッファソース
ディレイゲイン
![Page 7: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/7.jpg)
デ モ
Node Graph
ディレイゲイン
ピッチシフト
![Page 8: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/8.jpg)
変更点
AudioWorker (旧:ScriptProcessor)
● 遅延の軽減を目的
○ worker thread で動作させる
![Page 9: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/9.jpg)
利用可能なブラウザ
Ready! NOT yet...Prepearing!
![Page 10: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/10.jpg)
やってみよう!
![Page 11: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/11.jpg)
● 音量と音階を変える
信号処理:その1
デ モ
![Page 12: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/12.jpg)
音色を変更 = 波形を変える
![Page 13: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/13.jpg)
アナログ シンセサイザー
![Page 14: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/14.jpg)
● 波形を揺らしたり・削ったり・足したり
信号処理:その2
デ モ
![Page 15: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/15.jpg)
信号処理:その2:コードの解説 <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):電圧制御フィルタ
![Page 16: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/16.jpg)
FM シンセサイザー
![Page 17: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/17.jpg)
● 周波数をいじってみる
信号処理:その3
デ モ
![Page 18: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/18.jpg)
信号を扱う:その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のフィードバック
![Page 19: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/19.jpg)
Web MIDI API
5DIN (Deutsches Institut Fur Normung)
![Page 20: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/20.jpg)
音源モジュール
Webブラウザと MIDI機器を直接接続する 為のAPI
MIDIコントローラ
![Page 21: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/21.jpg)
● API自体の特徴
○ JavaScript で MIDI 機器と接続ができる
● Web Platformだから受ける特徴
○ 出どころが確実でOpenな仕様(W3C)
○ APIについてはPlatform依存がない
● API策定の方針
○ Developer 思考
○ Native と同等な API を目指す
特徴
![Page 22: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/22.jpg)
利用可能なブラウザ
● iOSでのWeb MIDI API○ Web MIDI Browser 上で動作します!!
web midi browser ios
![Page 23: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/23.jpg)
MIDIって?
● Musical Instrument Digital Interface○ 演奏データを機器間でデジタル転送する規格
■ 物理的な送受信回路
■ インターフェイス
■ プロトコル
■ ファイルフォーマット、等
MIDI
● Musical Instrument Digital Interface○ 演奏データを機器間でデジタル転送する規格
■ 物理的な送受信回路
■ インターフェイス
■ プロトコル
■ ファイルフォーマット、等
![Page 24: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/24.jpg)
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秒)
残りのメッセージは検索で!
![Page 25: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/25.jpg)
<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デバイスの接続:コードの解説● デバイスを列挙する
● メッセージを処理する
![Page 26: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/26.jpg)
x-webmidi
3秒でMIDIを使う準備を整えたい!
![Page 27: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/27.jpg)
x-webmidiWebMIDIのPolymerコンポーネント- 機器のリスト、入力、出力を行うことが可能。
x-webmidi
![Page 28: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/28.jpg)
やってみよう!
![Page 29: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/29.jpg)
デ モ
アナログ・シンセに接続してみる
![Page 30: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/30.jpg)
FM シンセに接続してみる
デ モ
![Page 31: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/31.jpg)
Webブラウザ上に楽器を作れちゃいました!
Photo by Ed Christensen
いや、ちょっと待てよ、、、
![Page 32: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/32.jpg)
昔からできたよね?!
<embeded src=”gegege.mid”>
<audio src=”hoho.ogg”>
![Page 33: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/33.jpg)
Photo by Giulia van Pelt
![Page 34: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/34.jpg)
音楽系アプリが動作するPlatformが増えた!
Photo by Giulia van Pelt
![Page 35: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/35.jpg)
● 開発環境
○ ブラウザ(debug 環境付き&実行環境)
○ テキストエディタ
● 言語
○ Web標準言語(HTML, CSS , JavaScript)○ コンパイルなし!
● その他
○ APIが豊富
○ 進化が速い
○ オープンだから情報が豊富!!
WebというPlatformの特徴
![Page 36: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/36.jpg)
● User視点
○ アプリのインストール不要
○ Nativeと変わらない(まだ制限が多いかも・・・)
● Developer視点
○ 開発のハードルが格段に下がった(自由化!)
○ 知識、ノウハウも得やすくなった
● マーケット
○ 音楽以外の分野との親和性が高まり、イノベー
ションが起きやすく、またそのスピードも上る
2つの視点とマーケット
![Page 37: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/37.jpg)
まずは触ってみよう!
![Page 38: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/38.jpg)
● Web Music Developers JPに相談だ!!
○ Google Groups○ Google+
Web Music Developers JP
実装に困ったら...
![Page 39: Web Audio API, Web MIDI API - 2015 html5 conference](https://reader034.vdocuments.net/reader034/viewer/2022042701/55a946731a28ab8c3e8b4634/html5/thumbnails/39.jpg)
ご静聴ありがとうございました!