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 が拓く
Web音楽の世界
JSPA 大音学会
http://www.jspa.gr.jp/jj2013/

AMEI Web MIDI WG
Yamaha Corporation

Ryoya Kawai
http:/...
おしながき
● AMEIについて
● MIDI
○ 概要
○ メッセージの基礎 (1), (2), (3)
○ ユースケース

● Web MIDI API
○ 概要
○ アプリケーションのデモ

● まとめ
AMEIについて
● 一般社団法人 音楽電子事業協会
○ MIDI規格を策定していたMIDI規格協議会(JMSC)が前
身で、1996年に社団法人化された。活動内容は、日本
国内においてMIDI規格の標準化、規格の策定、管理、
普及活動(MID...
MIDI
2013年でMIDIは30周年です!
● 1983年にNAMMで発表

● テクニカルグラミー受賞
○ 梯 郁太郎氏、Dave Smith氏
○ メーカーを問わない電子楽器の世界共通規格の制定に
尽力し、音楽産業の発展に貢献したことが評価
▶ ...
概要
● Musical Instrument Digital Interface
○ 電子楽器同士を接続する為のインターフェイス
■ 非同期シリアル通信
●

速度:31.25kbps

●

データ単位:8bits (1byte)

■ 端...
メッセージの基本(1)
● メッセージの種類
○ チャンネル・メッセージ
■ チャンネル毎に独立した演奏情報を伝える
○ システム・メッセージ
■ 全体をコントロールする情報を伝える
(9nh)
(8nh)

(F0h‥F7h)
(Cnh)

...
MIDI Message Tester

メッセージの基本(2)
● メッセージの構成
○ 単・複数の8bit (1Byte) で構成
○ Status Byte(80h-FFh)、Data Byte(00h-7Fh)
例1)Channel=0...
メッセージの基本(3)
● System Exclusive(SysEx)
○ 電子楽器固有の機能を制御する為に使用
■ Voice、エフェクトのパラメータ等を送信
○ メッセージ
■ F0hで始まり、F7hで終わる
■ 可変長
F0h

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

● MIDI検定 ▶ http://www.mid...
ユースケース
○ 音楽用途
■ 電子楽器の複数台同時コントロール
■ DAW(Cubase, Vision等)
■ カラオケ、演奏記録アプリ
■ 遠隔地ライブ配信

Elton John Remote Live

○ ショー(MSC:MIDI ...
Web MIDI API
概要
● ブラウザとMIDI機器をOpen Web Standardな
規格としてW3Cが策定を進めているAPI
○ WG:Audio WG (Web Audio APIと同一WG)
○ Editor:Chris Wilson(Google),...
W3CとHTML5
● World Wide Web Consortium (W3C)
○ World Wide Webで使用される各種技術の標準化
(Open Web Platform)を推進する為に設立された標準
化・非営利団体。

● H...
対応状況

注意
アドレスバーに ▼
chrome://flags/#enable-web-midi
を入力し、許可してください!!

● 実装済みブラウザ
○ Google Chrome Canary (Mac)

● その他のブラウザで使う...
シンプルなアプリケーション

http://goo.gl/gTbcHz
Web MIDI APIのコア部分

「0」をOUTPUTデバイスとしてセット

「0」をINPUTデバイスとしてセット

INPUTから入力されたMIDIメッセージを
OUTPUTに送信する
Web MIDI APIアプリケーションのデモ
● Web MIDI API Tool Box デモ
● Analog Synth デモ
● FMシンセ デモ

音楽データショップ http://www.music-eclub.com/musi...
Web Audio APIアプリケーション
● Pitch Detect デモ
○ by Chris Wilson
● PowerChord Guitars デモ
○ by @aike1000

● Web Seuencer
○ by @g20...
楽器以外を操作

Arduino UNO +MIDI Shield

http://goo.gl/KWT2Cn
MIDIメッセージ知らなくてもOK!
● Web MIDI API Wrapper
○ チャンネルメッセージをほぼ網羅
http://goo.gl/rWvhGW (英語)
http://goo.gl/RAJJTw (日本語)
かっこいいのって難いんでしょ?
● Web Audio Controls
○ かっこいいノブ、スライダー、スイッチ
http://goo.gl/FfEgVt (英語)
まとめ

注意
アドレスバーに ▼
chrome://flags/#enable-web-midi
を入力し、許可してください!!

● Chrome CanaryでWeb MIDI API実装済み!
○ Polyfillを使えばモダンブラウザ...
補足
● Web MIDI APIの進捗
○ W3Cの進め方

イマココ!

● Open Web Platformの仕様になるということ
○ 重要性が認められる必要があります
■ 盛り上がる必要あります!!!
▶ 例えば、アプリケーションを作...
OSはブラウザ(というノリ)の機器

Chromebook 11 (US$279, US, UK)

Firefox OS (US$100-200)
MIDIはもっと身近でOpenに!
Web Music Developers JP
● 音楽系アプリ等に興味のあるかたはぜひ!
○ Web Audio API
○ Web MIDI API
○ Web RTC

Google Groups : http://goo.gl/G9U8...
Hackathonやります!
● Web Audio / MIDI がテーマ
○ 日程:2013年10月19日(土)
○ 場所:Google Japan オフィス

※ 2013/10/19分の募集は終了しています。

詳細はこちら

これらの...
ご清聴ありがとうございました。

このスライドへのリンク

http://goo.gl/l35cZa
Upcoming SlideShare
Loading in …5
×

Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013

9,997 views

Published on

2013年 大音学会 の資料です。
(更新2) 2013/10/15 10:35 リンク切れを修正しました。
(更新1) 2013/10/13 20:40 全てのアプリケーションを公開いたしました。
(オリジナル) localのURLを示しているデモ(localhostの文字が入っているリンク)が複数あり、それらは動作しませんのでご了承ください。

Published in: Technology

Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013

  1. 1. Web MIDI API が拓く Web音楽の世界 JSPA 大音学会 http://www.jspa.gr.jp/jj2013/ AMEI Web MIDI WG Yamaha Corporation Ryoya Kawai http://goo.gl/hxWCA7
  2. 2. おしながき ● AMEIについて ● MIDI ○ 概要 ○ メッセージの基礎 (1), (2), (3) ○ ユースケース ● Web MIDI API ○ 概要 ○ アプリケーションのデモ ● まとめ
  3. 3. AMEIについて ● 一般社団法人 音楽電子事業協会 ○ MIDI規格を策定していたMIDI規格協議会(JMSC)が前 身で、1996年に社団法人化された。活動内容は、日本 国内においてMIDI規格の標準化、規格の策定、管理、 普及活動(MIDI検定試験)を行っている団体。 ○ 2013年9月 Web MIDI Working Groupが発足し、Web MIDI APIの規格策定・普及活動を積極的に行っていま す。
  4. 4. MIDI
  5. 5. 2013年でMIDIは30周年です! ● 1983年にNAMMで発表 ● テクニカルグラミー受賞 ○ 梯 郁太郎氏、Dave Smith氏 ○ メーカーを問わない電子楽器の世界共通規格の制定に 尽力し、音楽産業の発展に貢献したことが評価 ▶ Technical Grammy Award 2013
  6. 6. 概要 ● Musical Instrument Digital Interface ○ 電子楽器同士を接続する為のインターフェイス ■ 非同期シリアル通信 ● 速度:31.25kbps ● データ単位:8bits (1byte) ■ 端子:IN、OUT、THRU ■ 1ポート:16 チャンネル
  7. 7. メッセージの基本(1) ● メッセージの種類 ○ チャンネル・メッセージ ■ チャンネル毎に独立した演奏情報を伝える ○ システム・メッセージ ■ 全体をコントロールする情報を伝える (9nh) (8nh) (F0h‥F7h) (Cnh) ▶ Status Byte
  8. 8. MIDI Message Tester メッセージの基本(2) ● メッセージの構成 ○ 単・複数の8bit (1Byte) で構成 ○ Status Byte(80h-FFh)、Data Byte(00h-7Fh) 例1)Channel=0 で A4(NoteNo=69/45h) を 101/65h の Velocity の音を鳴らす 9 0 NoteOn Channel 45 65 A4 (NoteNo=69/45h) Velocity (101) ※ Channel=0 の A4(NoteNo=69) の音を止める (noteOff (8nh)) ▶ 80h 45h 00h 例2)Channel=0 の音色を Applause(programNo=126) に変更 C0 NoteOn Channel 7E Applause (ProgramNo=126/7Eh) (9nh) (8nh) (Cnh)
  9. 9. メッセージの基本(3) ● System Exclusive(SysEx) ○ 電子楽器固有の機能を制御する為に使用 ■ Voice、エフェクトのパラメータ等を送信 ○ メッセージ ■ F0hで始まり、F7hで終わる ■ 可変長 F0h <ID Number> <Device ID> ・・・ ○ ID Numnber (ManufactuererID) ■ 楽器メーカが持つ固有のID ● 取得には申請が必要 (申請先:AMEI(日本)、MMA) F7h
  10. 10. MIDIを詳しく知りたい! ● MIDI 1.0 規格書 ○ 発行:社団法人 音楽電子事業協会(AMEI) ▶ http://amei.or.jp/merchan/MIDI_spc.html ● MIDI検定 ▶ http://www.midilicense.com/
  11. 11. ユースケース ○ 音楽用途 ■ 電子楽器の複数台同時コントロール ■ DAW(Cubase, Vision等) ■ カラオケ、演奏記録アプリ ■ 遠隔地ライブ配信 Elton John Remote Live ○ ショー(MSC:MIDI Show Control) ■ Universal Studio Water World ■ Bellagio fountain show
  12. 12. Web MIDI API
  13. 13. 概要 ● ブラウザとMIDI機器をOpen Web Standardな 規格としてW3Cが策定を進めているAPI ○ WG:Audio WG (Web Audio APIと同一WG) ○ Editor:Chris Wilson(Google), Jussi Kalliokoski
  14. 14. W3CとHTML5 ● World Wide Web Consortium (W3C) ○ World Wide Webで使用される各種技術の標準化 (Open Web Platform)を推進する為に設立された標準 化・非営利団体。 ● HTML5 ○ HTMLの5回目の大幅な改訂版。 ○ 文書作成のHTMLから、 OpenなアプリケーションのPlatformへ。
  15. 15. 対応状況 注意 アドレスバーに ▼ chrome://flags/#enable-web-midi を入力し、許可してください!! ● 実装済みブラウザ ○ Google Chrome Canary (Mac) ● その他のブラウザで使う ○ Jazz-Plugin (Jazz-Soft.net) ■ http://jazz-soft.net/doc/Jazz-Plugin/ ○ Polyfill ■ Web MIDI API Shim ● Specへのリンク ○ W3C ○ Chrome
  16. 16. シンプルなアプリケーション http://goo.gl/gTbcHz
  17. 17. Web MIDI APIのコア部分 「0」をOUTPUTデバイスとしてセット 「0」をINPUTデバイスとしてセット INPUTから入力されたMIDIメッセージを OUTPUTに送信する
  18. 18. Web MIDI APIアプリケーションのデモ ● Web MIDI API Tool Box デモ ● Analog Synth デモ ● FMシンセ デモ 音楽データショップ http://www.music-eclub.com/musicdata/ TO MAKE THE END OF BATTLE / Ys2 © Falcom 1988 MIDI Data From : http://goo.gl/gxg4Cx
  19. 19. Web Audio APIアプリケーション ● Pitch Detect デモ ○ by Chris Wilson ● PowerChord Guitars デモ ○ by @aike1000 ● Web Seuencer ○ by @g200kg デモ
  20. 20. 楽器以外を操作 Arduino UNO +MIDI Shield http://goo.gl/KWT2Cn
  21. 21. MIDIメッセージ知らなくてもOK! ● Web MIDI API Wrapper ○ チャンネルメッセージをほぼ網羅 http://goo.gl/rWvhGW (英語) http://goo.gl/RAJJTw (日本語)
  22. 22. かっこいいのって難いんでしょ? ● Web Audio Controls ○ かっこいいノブ、スライダー、スイッチ http://goo.gl/FfEgVt (英語)
  23. 23. まとめ 注意 アドレスバーに ▼ chrome://flags/#enable-web-midi を入力し、許可してください!! ● Chrome CanaryでWeb MIDI API実装済み! ○ Polyfillを使えばモダンブラウザで利用可能 ● ツールを自作できます! ○ ちょっとしたツールはすぐに作れます。 ○ 少し頑張ればシーケンサーだって作れます。 ● Web APIとの組み合わせで無限大 ○ Web Audio:例) オリジナルシンセが作れます ○ Web Speech:例) 音声認識+楽器 ○ Web RTC:例) 遠隔地セッション、レッスン ● MIDIを楽器以外のデバイスに適応 ○ アイデア次第で夢は膨らむ Web RTC
  24. 24. 補足 ● Web MIDI APIの進捗 ○ W3Cの進め方 イマココ! ● Open Web Platformの仕様になるということ ○ 重要性が認められる必要があります ■ 盛り上がる必要あります!!! ▶ 例えば、アプリケーションを作って公開する等
  25. 25. OSはブラウザ(というノリ)の機器 Chromebook 11 (US$279, US, UK) Firefox OS (US$100-200)
  26. 26. MIDIはもっと身近でOpenに!
  27. 27. Web Music Developers JP ● 音楽系アプリ等に興味のあるかたはぜひ! ○ Web Audio API ○ Web MIDI API ○ Web RTC Google Groups : http://goo.gl/G9U8Mr Google+ : http://goo.gl/BULcuo
  28. 28. Hackathonやります! ● Web Audio / MIDI がテーマ ○ 日程:2013年10月19日(土) ○ 場所:Google Japan オフィス ※ 2013/10/19分の募集は終了しています。 詳細はこちら これらの画像はイメージす。
  29. 29. ご清聴ありがとうございました。 このスライドへのリンク http://goo.gl/l35cZa

×