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.
ブラウザとMIDIの出会いが拓く
WebとMusicの新しい世界

AMEI Web MIDI WG
Yamaha Corporation

Ryoya KAWAI
google.com/+RyoyaKawai
かわい りょうや
AMEI Web MIDI WG
ヤマハ株式会社
Web Music Developers JP

google.com/+RyoyaKawai
AMEI について
● 一般社団法人 音楽電子事業協会
○ MIDI規格を策定していたMIDI規格協議会(JMSC)が前
身で、1996年に社団法人化された。活動内容は、日本
国内においてMIDI規格の標準化、規格の策定、管理、
普及活動(MI...
Web MIDI APIのイメージ:1

http://

MIDI !!
MIDI
Photo by Alexander Henning Drachmann
License under CC BY-SA 2.0

そもそもMIDIって何?
MIDIの概要
● Musical Instrument Digital Interface
○ 電子楽器同士を接続する為のインターフェイス
■ 非同期シリアル通信
●

速度:31.25kbps

●

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

(F0h‥F7h)
...
MIDI Messsage Tester

MIDIメッセージの基本:2
● MIDIメッセージの構成
○ 単・複数の8bit (1Byte) で構成
○ Status Byte(80h-FFh)、Data Byte(00h-7fh)
例1)C...
MIDIメッセージの基本:3
● System Exclusive(SysEx)
○ 電子楽器固有の機能を制御する為に使用
■ Voice、エフェクトのパラメータ等を送信
○ メッセージ
■ F0hで始まり、F7hで終わる
■ 可変長
F0h
...
メリット
■ 信号なので実際の音よりデータ量が少ない
●
●

「発音せよ!」、「音色を変えろ!」等の信号
1分約10kb以下

■ ON/OFF に強弱がるけられる
■ シーケンスが書ける
Web MIDI APIのイメージ:2

http://

MIDI !!
MIDI
ユースケース
○ 音楽用途
■ 電子楽器の複数台同時コントロール
■ DAW(Cubase, Grageband等)
■ カラオケ、演奏記録アプリ
■ 遠隔地ライブ配信

Elton John Remote Live

○ Show(MSC:M...
Web MIDI APIのイメージ:3

http://

MIDI

MIDI !!

MIDI
ブラウザの中でがんばってるのは?

http://

MIDI !!

Designed by @g200kg
Photo by Eric Merrill
License under CC BY-SA 2.0

どんなのが作れるの?
ハッカソンやりました!!
● Web Music ハッカソン #1
○ VJ(Video Jockey) App

[URL]

○ Collaborate with other web APIs

[URL]

[URL]
Photo by marsmet462 License under CC BY-NC-SA 2.0

でも、難しいんでしょ?
ソースコード
接続は17行!!

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

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

INPUTから入力されたMIDIメッセージを
OUTPUTに送信する

注) 2013/11/30 現在 Chromeで動作...
ソースコード
接続は15行!!

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

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

INPUTから入力されたMIDIメッセージを
OUTPUTに送信する

注) 変更される可能性もあります。
ブラウザの対応状況

enable with Polyfill
I am inside!!

https://github.com/cwilso/WebMIDIAPIShim

Microsoft Connect
Photo by Matt Scott License under CC BY 2.0

MIDI知らない、、、orz
MIDIを知らなくても大丈夫!
● Web MIDI API Wrapper
○ チャンネルメッセージをほぼ網羅
http://goo.gl/rWvhGW (英語)
http://goo.gl/RAJJTw (日本語)
Web MIDI API Demo
Web Audio APIと使う

FM Synth デモ

Analog Synth デモ
楽器じゃない!?

http://goo.gl/KWT2Cn
yamaha-webmusic.github.io

Web MID Tool Box
はじめるならこれ!
MIDI音源:eVY1 Shield
● eVY1 Shield (eVocaloid by Yamaha)
○

http://www.switch-science.com/catalog/1490/

Arduino !!
USB-MIDI...
MIDIコントローラ:nanoシリーズ2
● KORG nanoシリーズ2
○

http://www.korg.co.jp/Product/Controller/nano2/
Musicを加えてWebを
もっと楽しもう!
One more thing...
Web Music Developers JP
▶ http://goo.gl/G9U8Mr

Web Music ハッカソン #2 やります!!
● 2014年1月中旬(予定)
ご清聴ありがとうございました!
アンケートにご協力ください!
あなたのフィードバックが、
html5jの活動を支えています!

http://bit.ly/html5C201311
アンケートへ答えた方にもれなく記念品プレゼント!
(アンケートの完了画面を1F受付にてご提示く...
Upcoming SlideShare
Loading in …5
×

ブラウザとmidiの出会いが拓くwebとmusicの新しい世界

8,834 views

Published on

@HTML5 CONFERENCE 2013

Published in: Technology
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/36cXjBY ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

ブラウザとmidiの出会いが拓くwebとmusicの新しい世界

  1. 1. ブラウザとMIDIの出会いが拓く WebとMusicの新しい世界 AMEI Web MIDI WG Yamaha Corporation Ryoya KAWAI google.com/+RyoyaKawai
  2. 2. かわい りょうや AMEI Web MIDI WG ヤマハ株式会社 Web Music Developers JP google.com/+RyoyaKawai
  3. 3. AMEI について ● 一般社団法人 音楽電子事業協会 ○ MIDI規格を策定していたMIDI規格協議会(JMSC)が前 身で、1996年に社団法人化された。活動内容は、日本 国内においてMIDI規格の標準化、規格の策定、管理、 普及活動(MIDI検定試験)を行っている団体。 ○ 2013年9月 Web MIDI Working Groupを発足させ、同 時にW3Cへ加盟し積極的にWeb MIDI APIの規格策定 ・普及活動を開始。 URL:http://www.amei.or.jp/
  4. 4. Web MIDI APIのイメージ:1 http:// MIDI !! MIDI
  5. 5. Photo by Alexander Henning Drachmann License under CC BY-SA 2.0 そもそもMIDIって何?
  6. 6. MIDIの概要 ● Musical Instrument Digital Interface ○ 電子楽器同士を接続する為のインターフェイス ■ 非同期シリアル通信 ● 速度:31.25kbps ● データ単位:8bits (1byte) ■ 端子:IN、OUT、THRU ■ 1ポート:16 チャンネル
  7. 7. MIDIメッセージの基本:1 ● MIDIメッセージの種類 ○ チャンネル・メッセージ ■ チャンネル毎に独立した演奏情報を伝える ○ システム・メッセージ ■ 全体をコントロールする情報を伝える (9nh) (8nh) (F0h‥F7h) (Cnh)
  8. 8. MIDI Messsage Tester MIDIメッセージの基本:2 ● MIDIメッセージの構成 ○ 単・複数の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. MIDIメッセージの基本:3 ● System Exclusive(SysEx) ○ 電子楽器固有の機能を制御する為に使用 ■ Voice、エフェクトのパラメータ等を送信 ○ メッセージ ■ F0hで始まり、F7hで終わる ■ 可変長 F0h <ID Number> <Device ID> ・・・ ○ ID Numnber (ManufactuererID) ■ 楽器メーカが持つ固有のID ● 取得には申請が必要 (申請先:AMEI(日本)、MMA) F7h
  10. 10. メリット ■ 信号なので実際の音よりデータ量が少ない ● ● 「発音せよ!」、「音色を変えろ!」等の信号 1分約10kb以下 ■ ON/OFF に強弱がるけられる ■ シーケンスが書ける
  11. 11. Web MIDI APIのイメージ:2 http:// MIDI !! MIDI
  12. 12. ユースケース ○ 音楽用途 ■ 電子楽器の複数台同時コントロール ■ DAW(Cubase, Grageband等) ■ カラオケ、演奏記録アプリ ■ 遠隔地ライブ配信 Elton John Remote Live ○ Show(MSC:MIDI Show Control) ■ Universal Studio Water World ■ Bellagio fountain show
  13. 13. Web MIDI APIのイメージ:3 http:// MIDI MIDI !! MIDI
  14. 14. ブラウザの中でがんばってるのは? http:// MIDI !! Designed by @g200kg
  15. 15. Photo by Eric Merrill License under CC BY-SA 2.0 どんなのが作れるの?
  16. 16. ハッカソンやりました!! ● Web Music ハッカソン #1 ○ VJ(Video Jockey) App [URL] ○ Collaborate with other web APIs [URL] [URL]
  17. 17. Photo by marsmet462 License under CC BY-NC-SA 2.0 でも、難しいんでしょ?
  18. 18. ソースコード 接続は17行!! 「0」をOUTPUTデバイスとしてセット 「0」をINPUTデバイスとしてセット INPUTから入力されたMIDIメッセージを OUTPUTに送信する 注) 2013/11/30 現在 Chromeで動作する書式です
  19. 19. ソースコード 接続は15行!! 「0」をOUTPUTデバイスとしてセット 「0」をINPUTデバイスとしてセット INPUTから入力されたMIDIメッセージを OUTPUTに送信する 注) 変更される可能性もあります。
  20. 20. ブラウザの対応状況 enable with Polyfill I am inside!! https://github.com/cwilso/WebMIDIAPIShim Microsoft Connect
  21. 21. Photo by Matt Scott License under CC BY 2.0 MIDI知らない、、、orz
  22. 22. MIDIを知らなくても大丈夫! ● Web MIDI API Wrapper ○ チャンネルメッセージをほぼ網羅 http://goo.gl/rWvhGW (英語) http://goo.gl/RAJJTw (日本語)
  23. 23. Web MIDI API Demo
  24. 24. Web Audio APIと使う FM Synth デモ Analog Synth デモ
  25. 25. 楽器じゃない!? http://goo.gl/KWT2Cn
  26. 26. yamaha-webmusic.github.io Web MID Tool Box
  27. 27. はじめるならこれ!
  28. 28. MIDI音源:eVY1 Shield ● eVY1 Shield (eVocaloid by Yamaha) ○ http://www.switch-science.com/catalog/1490/ Arduino !! USB-MIDI !! 特徴 1ch:eVocaloid 2-16ch: General MIDI (GM) ex) Culture of Vocaloid : http://youtu.be/xExy_FCC0PA
  29. 29. MIDIコントローラ:nanoシリーズ2 ● KORG nanoシリーズ2 ○ http://www.korg.co.jp/Product/Controller/nano2/
  30. 30. Musicを加えてWebを もっと楽しもう!
  31. 31. One more thing... Web Music Developers JP ▶ http://goo.gl/G9U8Mr Web Music ハッカソン #2 やります!! ● 2014年1月中旬(予定)
  32. 32. ご清聴ありがとうございました!
  33. 33. アンケートにご協力ください! あなたのフィードバックが、 html5jの活動を支えています! http://bit.ly/html5C201311 アンケートへ答えた方にもれなく記念品プレゼント! (アンケートの完了画面を1F受付にてご提示ください) お知らせ: 最終スペシャルセッションの開始時刻が変更になりました(18:30→18:20) 10分早まっています。ご注意ください!

×