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

1,646 views
1,527 views

Published on

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

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,646
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
7
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

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

×