@HTML5 CONFERENCE 2013

1. ブラウザとMIDIの出会いが拓く
WebとMusicの新しい世界
AMEI Web MIDI WG
Yamaha Corporation
Ryoya KAWAI
google.com/+RyoyaKawai

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

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. Web MIDI APIのイメージ：１
http://
MIDI !!
MIDI

5. Photo by Alexander Henning Drachmann
License under CC BY-SA 2.0
そもそもMIDIって何？

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

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

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

10. メリット
■ 信号なので実際の音よりデータ量が少ない
●
●
「発音せよ！」、「音色を変えろ！」等の信号
1分約10kb以下
■ ON/OFF に強弱がるけられる
■ シーケンスが書ける

11. Web MIDI APIのイメージ：２
http://
MIDI !!
MIDI

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

13. Web MIDI APIのイメージ：３
http://
MIDI
MIDI !!
MIDI

14. ブラウザの中でがんばってるのは？
http://
MIDI !!
Designed by @g200kg

15. Photo by Eric Merrill
License under CC BY-SA 2.0
どんなのが作れるの？

16. ハッカソンやりました！！
● Web Music ハッカソン #1
○ VJ(Video Jockey) App
[URL]
○ Collaborate with other web APIs
[URL]
[URL]

17. Photo by marsmet462 License under CC BY-NC-SA 2.0
でも、難しいんでしょ？

18. ソースコード
接続は17行！！
「0」をOUTPUTデバイスとしてセット
「0」をINPUTデバイスとしてセット
INPUTから入力されたMIDIメッセージを
OUTPUTに送信する
注) 2013/11/30 現在 Chromeで動作する書式です

19. ソースコード
接続は15行！！
「0」をOUTPUTデバイスとしてセット
「0」をINPUTデバイスとしてセット
INPUTから入力されたMIDIメッセージを
OUTPUTに送信する
注) 変更される可能性もあります。

20. ブラウザの対応状況
enable with Polyfill
I am inside!!
https://github.com/cwilso/WebMIDIAPIShim
Microsoft Connect

21. Photo by Matt Scott License under CC BY 2.0
MIDI知らない、、、orz

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

23. Web MIDI API Demo

24. Web Audio APIと使う
FM Synth デモ
Analog Synth デモ

25. 楽器じゃない！？
http://goo.gl/KWT2Cn

26. yamaha-webmusic.github.io
Web MID Tool Box

27. はじめるならこれ！

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. MIDIコントローラ：nanoシリーズ2
● KORG nanoシリーズ2
○
http://www.korg.co.jp/Product/Controller/nano2/

30. Musicを加えてWebを
もっと楽しもう！

31. One more thing...
Web Music Developers JP
▶ http://goo.gl/G9U8Mr
Web Music ハッカソン #2 やります！！
● 2014年1月中旬（予定）

32. ご清聴ありがとうございました！

33. アンケートにご協力ください！
あなたのフィードバックが、
html5jの活動を支えています！
http://bit.ly/html5C201311
アンケートへ答えた方にもれなく記念品プレゼント！
（アンケートの完了画面を1F受付にてご提示ください）
お知らせ:
最終スペシャルセッションの開始時刻が変更になりました（18:30→18:20）
10分早まっています。ご注意ください！