Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web MIDI API
Google Developers Live Japan #8
http://goo.gl/89Lbdd
Yamaha Corporation
AMEI Web MIDI WG
Ryoya Kawai
http://g...
おしながき
● MIDI
○ 概要
○ メッセージの基礎 (1), (2), (3)
○ メリット・デメリット
○ ユースケース
● Web MIDI API
○ 概要
○ Spec、Source
○ Live Coding
● まとめ
MIDI
本題の前に
● 2013年でMIDIは30周年
○ 発表:1983年
● テクニカルグラミー受賞
○ 梯 郁太郎氏、Dave Smith氏
○ メーカーを問わない電子楽器の世界共通規格の制定に
尽力し、音楽産業の発展に貢献したことが評価
▶ T...
概要
● Musical Instrument Digital Interface
○ 電子楽器同士を接続する為のインターフェイス
■ 非同期シリアル通信
● 速度:31.25kbps
● データ単位:8bits (1byte)
■ 端子:IN...
メッセージの基本(1)
● メッセージの種類
○ チャンネル・メッセージ
■ チャンネル毎に独立した演奏情報を伝える
○ システム・メッセージ
■ 全体をコントロールする情報を伝える
▶ Status Byte
(9nh)
(8nh)
(Cnh...
メッセージの基本(2)
● メッセージの構成
○ 単・複数の8bit (1Byte) で構成
○ Status Byte(80h-FFh)、Data Byte(00h-7fh)
例1)Channel=0 で A4(NoteNo=69/45h) ...
メッセージの基本(3)
● System Exclusive(SysEx)
○ 電子楽器固有の機能を制御する為に使用
■ Voice、エフェクトのパラメータ等を送信
○ メッセージ
■ F0hで始まり、F7hで終わる
■ 可変長
○ ID Nu...
MIDIを詳しく知りたい!
● MIDI 1.0 規格書
○ 発行:社団法人 音楽電子事業協会(AMEI)
▶ http://amei.or.jp/merchan/MIDI_spc.html
メリット・デメリット
○ メリット
■ 信号なので実際の音よりデータ量が少ない
● 「発音せよ!」、「音色を変えろ!」等の信号
● 1分約10kb以下
■ シーケンスが書ける
○ デメリット
■ 音源によって音色がバラつく可能性がある
ユースケース
○ 音楽用途
■ 電子楽器の複数台同時コントロール
■ DAW(Cubase, Vision等)
■ カラオケ、演奏記録アプリ
■ 遠隔地ライブ配信 Elton John Remote Live
○ ショー(MSC:MIDI Sh...
MIDIをみてみる
TO MAKE THE END OF BATTLE / Ys2 © Falcom 1988
MIDI Data From : http://goo.gl/gxg4Cx
Web MIDI API
概要
● ブラウザとMIDI機器を直接つなぐHTML5の1部
としてW3Cにて策定が進められているAPI
○ WG:Audio WG (Web Audio APIと同一WG)
○ Editor:Chris Wilson(Google), Jus...
対応状況
● 実装済みブラウザ
○ Google Chrome Canary (Mac)
● その他のブラウザで使う
○ Jazz-Plugin (Jazz-Soft.net)
■ http://jazz-soft.net/doc/Jazz-P...
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) ...
Source
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を使えばメッセージを理解する必要もない
● MID...
Web Music Developers JP
● 音楽系アプリ等に興味のあるかたはぜひ!
○ Web Audio API
○ Web MIDI API
○ Web RTC
Google Groups : http://goo.gl/G9U8M...
Upcoming SlideShare
Loading in …5
×

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

2,055 views

Published on

▼ 映像はこちらです!
https://plus.google.com/events/cv1s0fgm13v2f3tfignfeqjj4fo

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

  1. 1. Web MIDI API Google Developers Live Japan #8 http://goo.gl/89Lbdd Yamaha Corporation AMEI Web MIDI WG Ryoya Kawai http://goo.gl/hxWCA7
  2. 2. おしながき ● MIDI ○ 概要 ○ メッセージの基礎 (1), (2), (3) ○ メリット・デメリット ○ ユースケース ● Web MIDI API ○ 概要 ○ Spec、Source ○ Live Coding ● まとめ
  3. 3. MIDI
  4. 4. 本題の前に ● 2013年でMIDIは30周年 ○ 発表:1983年 ● テクニカルグラミー受賞 ○ 梯 郁太郎氏、Dave Smith氏 ○ メーカーを問わない電子楽器の世界共通規格の制定に 尽力し、音楽産業の発展に貢献したことが評価 ▶ Technical Grammy Award 2013
  5. 5. 概要 ● Musical Instrument Digital Interface ○ 電子楽器同士を接続する為のインターフェイス ■ 非同期シリアル通信 ● 速度:31.25kbps ● データ単位:8bits (1byte) ■ 端子:IN、OUT、THRU ■ 1ポート:16 チャンネル
  6. 6. メッセージの基本(1) ● メッセージの種類 ○ チャンネル・メッセージ ■ チャンネル毎に独立した演奏情報を伝える ○ システム・メッセージ ■ 全体をコントロールする情報を伝える ▶ Status Byte (9nh) (8nh) (Cnh) (F0h‥F7h)
  7. 7. メッセージの基本(2) ● メッセージの構成 ○ 単・複数の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
  8. 8. メッセージの基本(3) ● System Exclusive(SysEx) ○ 電子楽器固有の機能を制御する為に使用 ■ Voice、エフェクトのパラメータ等を送信 ○ メッセージ ■ F0hで始まり、F7hで終わる ■ 可変長 ○ ID Numnber (ManufactuererID) ■ 楽器メーカが持つ固有のID ● 取得には申請が必要 (申請先:AMEI(日本)、MMA) F0h <ID Number> <Device ID> F7h・・・
  9. 9. MIDIを詳しく知りたい! ● MIDI 1.0 規格書 ○ 発行:社団法人 音楽電子事業協会(AMEI) ▶ http://amei.or.jp/merchan/MIDI_spc.html
  10. 10. メリット・デメリット ○ メリット ■ 信号なので実際の音よりデータ量が少ない ● 「発音せよ!」、「音色を変えろ!」等の信号 ● 1分約10kb以下 ■ シーケンスが書ける ○ デメリット ■ 音源によって音色がバラつく可能性がある
  11. 11. ユースケース ○ 音楽用途 ■ 電子楽器の複数台同時コントロール ■ DAW(Cubase, Vision等) ■ カラオケ、演奏記録アプリ ■ 遠隔地ライブ配信 Elton John Remote Live ○ ショー(MSC:MIDI Show Control) ■ Universal Studio Water World ■ Bellagio fountain show
  12. 12. MIDIをみてみる TO MAKE THE END OF BATTLE / Ys2 © Falcom 1988 MIDI Data From : http://goo.gl/gxg4Cx
  13. 13. Web MIDI API
  14. 14. 概要 ● ブラウザとMIDI機器を直接つなぐHTML5の1部 としてW3Cにて策定が進められているAPI ○ WG:Audio WG (Web Audio APIと同一WG) ○ Editor:Chris Wilson(Google), Jussi Kalliokoski ○ Milestone
  15. 15. 対応状況 ● 実装済みブラウザ ○ Google Chrome Canary (Mac) ● その他のブラウザで使う ○ Jazz-Plugin (Jazz-Soft.net) ■ http://jazz-soft.net/doc/Jazz-Plugin/ ○ Polyfill ■ Web MIDI API Shim ○ 使い方
  16. 16. Specへのリンク ● W3C http://webaudio.github.io/web-midi-api/ ● Chrome http://goo.gl/D3AHF3
  17. 17. 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
  18. 18. Source
  19. 19. MIDIメッセージ知らなくてもOK! ● Web MIDI API Wrapper ○ チャンネルメッセージをほぼ網羅 http://goo.gl/rWvhGW (英語) http://goo.gl/RAJJTw (日本語)
  20. 20. Live Coding http://goo.gl/gTbcHz
  21. 21. 楽器以外を操作 Arduino UNO +MIDI Shield http://goo.gl/KWT2Cn
  22. 22. まとめ ● Chrome CanaryでWeb MIDI API実装済み! ○ Polyfillを使えばモダンブラウザで利用可能 ● Web MIDI APIはすごくシンプル ○ Wrapperを使えばメッセージを理解する必要もない ● MIDIは楽器だけの規格にあらず ○ アイデア次第で夢は膨らむ
  23. 23. Web Music Developers JP ● 音楽系アプリ等に興味のあるかたはぜひ! ○ Web Audio API ○ Web MIDI API ○ Web RTC Google Groups : http://goo.gl/G9U8Mr Google+ : http://goo.gl/BULcuo

×