Web Audio API、 Web MIDI API
を使ったサウンドプログラミング
ヤマハ 株式会社 かわい りょうや
個人活動
● HTML5Experts.jp #55
● Web Music Developers JP 管理人
かわい りょうや
google.com/+RyoyaKawai
ヤマハ株式会社 NVPプロジェクト
@ryoyakawai
得意技
● Web Audio API, Web MIDI API
● Polymer (Web Components)
● 大外刈、クロール
みでゃっぴー by @g200kg
(Unofficial Web MIDI API Mascot)
Web Audio API
Webブラウザ上で
信号処理を可能にした API
● API自体
○ JavaScript で音そのものを作成&加工
● Web Platformだから受ける特徴
○ 出どころが確実でOpenな仕様(W3C)
○ Platform依存がない
● API策定の方針
○ Developer 思考
○ Native と同等な API を目指す
○ モジュール思考(Web Audioでは ”Node”と呼ぶ)
特徴:Web Audio API
モジュール(Node)思考
● オシレーター
● オーディオバッファソース
● ゲイン
● フィルター
● ディレイ
● スクリプトプロセッサー
● パン
● コンプレッサー
● コンボルバー
● アナライザー
● ウェーブシェイパー
用意されているNode
Node Graph
オーディオ
バッファソース
ディレイゲイン
デ モ
Node Graph
ディレイゲイン
ピッチシフト
ブラウザで音って楽しそうでしょ?
― 何だか分からないけどw
Web Audio APIを利用可能なブラウザ
iOS Mini
やってみよう!
● 音量と音階を変える
信号処理:その1
デ モ
音色を変更 = 波形を変える
アナログ シンセサイザー
● 波形を揺らしたり・削ったり・足したり
信号処理:その2
デ モ
信号処理:その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):電圧制御フィルタ
FM シンセサイザー
● 周波数をいじってみる
信号処理:その3
デ モ
信号を扱う:その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 の周波数の比率
● Modulator のアウトプットレベル
● Moduator のフィードバック
Web MIDI API
5DIN (Deutsches Institut Fur Normung)
ブラウザがMIDIをサポート?
@ITさん
DTM Station:藤本健さん
音源モジュール
Webブラウザと
MIDI機器を直接接続する 為のAPI
MIDIコントローラ
● API自体
○ JavaScript で MIDI 機器と接続ができる
● Web Platformだから受ける特徴
○ 出どころが確実でOpenな仕様(W3C)
○ APIについてはPlatform依存がない
● API策定の方針
○ Developer 思考
○ Native と同等な API を目指す
特徴:Web MIDI API
Web Audio APIを利用可能なブラウザ
iOS Mini
working on
利用可能なブラウザ
Google
chrome
Mac
Windows
Android
Chromebook
● iOSでのWeb MIDI API
○ Web MIDI Browser 上で動作します!!
web midi browser ios
Opera
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 メッセージ
約 452, 000件 (0.33秒)
残りのメッセージは検索で!
<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デバイスの接続:コードの解説
● デバイスを列挙する
● メッセージを処理する
“There’s an element for that!”
― 1時間前に小松さん曰く
Extensible Web
x-webmidi
3秒でMIDIを使う準備を整えたい!
x-webmidi
Web MIDI APIの Polymer Element
- bower 対応
- 機器のリスト、接続
- 取得メッセージのParse
- 16進数は覚える必要なし
x-webmidi
$ bower install x-webmidi;
やってみよう!
デ モ
アナログ・シンセに接続してみる
FM シンセに接続してみる
デ モ
Webブラウザ上に
楽器を作れちゃいました!
Photo by Ed Christensen
いや、ちょっと待てよ、、、
昔からできたよね?
<audio src=”hoho.ogg”>
<embeded src=”gegege.mid”>
Photo by Giulia van Pelt
新しくないなら何か変わるの?
標準化されたAPIを持つ
Platformが増えた!
Photo by Giulia van Pelt
Web ブラウザ
● 標準化された環境
○ 安心して利用できる
○ オープン
● 開発環境
○ ブラウザ & テキストエディタ
● 言語
○ Web標準言語(HTML, CSS , JavaScript)
● その他
○ APIが豊富で進化が速い
○ オープンだから情報が豊富!!
WebというPlatformの特徴
● User視点
○ アプリのインストール不要
○ Nativeと変わらない(まだ制限が多いかも・・・)
● Developer視点
○ 格段に開発のハードルが下がった(自由化!)
○ モノゴトがオープンに進む
● マーケット
○ イノベーションが起きやすい
○ 進化のスピードもアップ
2つの視点とマーケット
イノベーションって言っても楽器界隈だけでしょ?
って、疑問がありそうなので.....
● 音楽以外の用途
○ MIDI Show Control(MSC)
■ ステージの照明等の操作
■ 96台の機材を制御可能
(照明、ビデオ、スモーク、爆発等)
音楽分野外でのMIDIの利用
個人的なMIDIへの期待
Machine2Machine Interactive Digital Interface
Musical Instrument Digital Interface
まずは触ってみよう!
● Web Music Developers JPに相談だ!!
○ Google Groups
○ Google+
Web Music Developers JP
Web Audio/MIDIで困ったら...
日程:7月25日(土) 10:00 - 18:00
場所:京都リサーチパーク
GDG京都・GDG神戸・Web Music Developers JP 共同開催
Web Music ハッカソン@京都
京都 Web Music
Photo by Moyan Brenn
goo.gl/juh2E2
アンケートにご協力お願いします。
http://bit.ly/html5C201507
ご静聴ありがとうございました!

HTML5 Conference 2015 鹿児島