![ハッカソンやりました！！
● Web Music ハッカソン #1
○ VJ(Video Jockey) App
[URL]
○ Collaborate with other web APIs
[URL]
[URL]](https://image.slidesharecdn.com/copyofmidiwebmusic-131130092821-phpapp01/85/midi-web-music-16-320.jpg)
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
- 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で動作する書式です
- 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 デモ
- 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
- 31. One more thing... Web Music Developers JP ▶ http://goo.gl/G9U8Mr Web Music ハッカソン #2 やります！！ ● 2014年1月中旬（予定）
- 32. ご清聴ありがとうございました！