HTML5 Conference 2015 鹿児島

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

やってみよう！

● 音量と音階を変える

信号処理：その１

デ モ

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

アナログ シンセサイザー

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

信号処理：その２

デ モ

信号処理：その２：コードの解説 <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 の周波数の比率

● Modulator のアウトプットレベル

● Moduator のフィードバック

Web MIDI API

５DIN (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 Miniworking 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-webmidiWeb 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

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