Web Audio API、 Web MIDI APIを使ったサウンドプログラミング

ヤマハ 株式会社 かわい りょうや

かわい りょうや

google.com/+RyoyaKawaipepper x VOCALOID

Open Research Forum @KeioWeb Music ハッカソン

Web Audio API

Webブラウザ上で

信号処理を可能にした API

● API自体の特徴

○ JavaScript で音そのものを作成＆加工

● Web Platformだから受ける特徴

○ 出どころが確実でOpenな仕様（W3C）

○ APIについてはPlatform依存がない

● API策定の方針

○ Developer 思考

○ Native と同等な API を目指す

○ モジュール思考（Web Audioでは ”Node”と呼ぶ）

特徴

モジュール（Node）思考

● オシレーター

● オーディオバッファソース

● ゲイン

● フィルター

● ディレイ

● スクリプトプロセッサー

● パン

● コンプレッサー

● コンボルバー

● アナライザー

● ウェーブシェイパー

用意されているNode

Node Graph

オーディオバッファソース

ディレイゲイン

デ モ

Node Graph

ディレイゲイン

ピッチシフト

変更点

AudioWorker (旧：ScriptProcessor)

● 遅延の軽減を目的

○ worker thread で動作させる

利用可能なブラウザ

Ready! NOT yet...Prepearing!

やってみよう！

● 音量と音階を変える

信号処理：その１

デ モ

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

アナログ シンセサイザー

● 波形を揺らしたり・削ったり・足したり

信号処理：その２

デ モ

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

FM シンセサイザー

● 周波数をいじってみる

信号処理：その３

デ モ

信号を扱う：その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のフィードバック

Web MIDI API

５DIN (Deutsches Institut Fur Normung)

音源モジュール

Webブラウザと MIDI機器を直接接続する 為のAPI

MIDIコントローラ

● API自体の特徴

○ JavaScript で MIDI 機器と接続ができる

● Web Platformだから受ける特徴

○ 出どころが確実でOpenな仕様（W3C）

○ APIについてはPlatform依存がない

● API策定の方針

○ Developer 思考

○ Native と同等な API を目指す

特徴

利用可能なブラウザ

● iOSでのWeb MIDI API○ Web MIDI Browser 上で動作します！！

web midi browser ios

MIDIって？

● Musical Instrument Digital Interface○ 演奏データを機器間でデジタル転送する規格

■ 物理的な送受信回路

■ インターフェイス

■ プロトコル

■ ファイルフォーマット、等

MIDI

● Musical Instrument Digital Interface○ 演奏データを機器間でデジタル転送する規格

■ 物理的な送受信回路

■ インターフェイス

■ プロトコル

■ ファイルフォーマット、等

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秒)

残りのメッセージは検索で！

<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デバイスの接続：コードの解説● デバイスを列挙する

● メッセージを処理する

x-webmidi

3秒でMIDIを使う準備を整えたい！

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

x-webmidi

やってみよう！

デ モ

アナログ・シンセに接続してみる

FM シンセに接続してみる

デ モ

Webブラウザ上に楽器を作れちゃいました！

Photo by Ed Christensen

いや、ちょっと待てよ、、、

昔からできたよね？！

<embeded src=”gegege.mid”>

<audio src=”hoho.ogg”>

Photo by Giulia van Pelt

音楽系アプリが動作するPlatformが増えた！

Photo by Giulia van Pelt

● 開発環境

○ ブラウザ（debug 環境付き＆実行環境）

○ テキストエディタ

● 言語

○ Web標準言語（HTML, CSS , JavaScript）○ コンパイルなし！

● その他

○ APIが豊富

○ 進化が速い

○ オープンだから情報が豊富！！

WebというPlatformの特徴

● User視点

○ アプリのインストール不要

○ Nativeと変わらない（まだ制限が多いかも・・・）

● Developer視点

○ 開発のハードルが格段に下がった（自由化！）

○ 知識、ノウハウも得やすくなった

● マーケット

○ 音楽以外の分野との親和性が高まり、イノベー

ションが起きやすく、またそのスピードも上る

2つの視点とマーケット

まずは触ってみよう！

● Web Music Developers JPに相談だ！！

○ Google Groups○ Google+

Web Music Developers JP

実装に困ったら...

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

アンケートにご協力お願いします。

http://bit.ly/html5C201501