Chrome+HTML5 Developers Live Japan #8 - Web MIDI API

Web MIDI API
Google Developers Live Japan #8
http://goo.gl/89Lbdd
Yamaha Corporation
AMEI Web MIDI WG
Ryoya Kawai
http://goo.gl/hxWCA7

おしながき
● MIDI
○ 概要
○ メッセージの基礎 (1), (2), (3)
○ メリット・デメリット
○ ユースケース
● Web MIDI API
○ 概要
○ Spec、Source
○ Live Coding
● まとめ

本題の前に
● 2013年でMIDIは30周年
○ 発表：1983年
● テクニカルグラミー受賞
○ 梯郁太郎氏、Dave Smith氏
○ メーカーを問わない電子楽器の世界共通規格の制定に
尽力し、音楽産業の発展に貢献したことが評価
▶ Technical Grammy Award 2013

概要
● Musical Instrument Digital Interface
○ 電子楽器同士を接続する為のインターフェイス
■ 非同期シリアル通信
● 速度：31.25kbps
● データ単位：8bits (1byte)
■ 端子：IN、OUT、THRU
■ 1ポート：16 チャンネル

メッセージの基本（１）
● メッセージの種類
○ チャンネル・メッセージ
■ チャンネル毎に独立した演奏情報を伝える
○ システム・メッセージ
■ 全体をコントロールする情報を伝える
▶ Status Byte
(9nh)
(8nh)
(Cnh)
(F0h‥F7h)

メッセージの基本（２）
● メッセージの構成
○ 単・複数の8bit (1Byte) で構成
○ Status Byte(80h-FFh)、Data Byte(00h-7fh)
例1）Channel=0 で A4(NoteNo=69/45h) を 101/65h の Velocity の音を鳴らす
A4 (NoteNo=69/45h)Channel Velocity (101)NoteOn
※ Channel=0 の A4(NoteNo=69) の音を止める (noteOff (8nh)) ▶ 80h 45h 00h
例2）Channel=0 の音色を Applause(programNo=126) に変更
9 0 4 5 6 5
Applause
(ProgramNo=126/7Eh)
ChannelNoteOn
C 0 7 E (9nh)
(8nh)
(Cnh)
MIDI Message Tester

メッセージの基本（３）
● System Exclusive(SysEx)
○ 電子楽器固有の機能を制御する為に使用
■ Voice、エフェクトのパラメータ等を送信
○ メッセージ
■ F0hで始まり、F7hで終わる
■ 可変長
○ ID Numnber (ManufactuererID)
■ 楽器メーカが持つ固有のID
● 取得には申請が必要（申請先：AMEI(日本)、MMA）
F0h <ID Number> <Device ID> F7h・・・

MIDIを詳しく知りたい！
● MIDI 1.0 規格書
○ 発行：社団法人音楽電子事業協会(AMEI)
▶ http://amei.or.jp/merchan/MIDI_spc.html

メリット・デメリット
○ メリット
■ 信号なので実際の音よりデータ量が少ない
● 「発音せよ！」、「音色を変えろ！」等の信号
● 1分約10kb以下
■ シーケンスが書ける
○ デメリット
■ 音源によって音色がバラつく可能性がある

ユースケース
○ 音楽用途
■ 電子楽器の複数台同時コントロール
■ DAW(Cubase, Vision等)
■ カラオケ、演奏記録アプリ
■ 遠隔地ライブ配信 Elton John Remote Live
○ ショー（MSC：MIDI Show Control）
■ Universal Studio Water World
■ Bellagio fountain show

MIDIをみてみる
TO MAKE THE END OF BATTLE / Ys2 © Falcom 1988
MIDI Data From : http://goo.gl/gxg4Cx

概要
● ブラウザとMIDI機器を直接つなぐHTML5の1部
としてW3Cにて策定が進められているAPI
○ WG：Audio WG (Web Audio APIと同一WG)
○ Editor：Chris Wilson(Google), Jussi Kalliokoski
○ Milestone

対応状況
● 実装済みブラウザ
○ Google Chrome Canary (Mac)
● その他のブラウザで使う
○ Jazz-Plugin (Jazz-Soft.net)
■ http://jazz-soft.net/doc/Jazz-Plugin/
○ Polyfill
■ Web MIDI API Shim
○ 使い方

Specへのリンク
● W3C
http://webaudio.github.io/web-midi-api/
● Chrome
http://goo.gl/D3AHF3

Spec
● Method
○ [(I/F) navigator]
requestMIDIAccess({sysex:ture/false}).then(scb, ecb)
→ scb：(I/F) MIDIAccess
→ ecb：(I/F) DOMError
○ [(I/F) MIDIAccess] outputs() -> (I/F) MIDIPort
■ [(I/F) MIDIOutput] send()
○ [(I/F) MIDIAccess] inputs() -> (I/F) MIDIPort
● EventHandler
○ [(I/F) MIDIInput] onmidimessage
○ [(I/F) MIDIOutput] onconnect
○ [(I/F) MIDIOutput] ondisconnect

MIDIメッセージ知らなくてもOK！
● Web MIDI API Wrapper
○ チャンネルメッセージをほぼ網羅
http://goo.gl/rWvhGW (英語)
http://goo.gl/RAJJTw (日本語)

Live Coding
http://goo.gl/gTbcHz

楽器以外を操作
Arduino UNO +MIDI Shield
http://goo.gl/KWT2Cn

まとめ
● Chrome CanaryでWeb MIDI API実装済み！
○ Polyfillを使えばモダンブラウザで利用可能
● Web MIDI APIはすごくシンプル
○ Wrapperを使えばメッセージを理解する必要もない
● MIDIは楽器だけの規格にあらず
○ アイデア次第で夢は膨らむ

Web Music Developers JP
● 音楽系アプリ等に興味のあるかたはぜひ！
○ Web Audio API
○ Web MIDI API
○ Web RTC
Google Groups : http://goo.gl/G9U8Mr
Google+ : http://goo.gl/BULcuo

Chrome+HTML5 Developers Live Japan #8 - Web MIDI API

More Related Content

Chrome+HTML5 Developers Live Japan #8 - Web MIDI API