SlideShare una empresa de Scribd logo
1 de 29
Descargar para leer sin conexión
Web MIDI API が拓く
Web音楽の世界
JSPA 大音学会
http://www.jspa.gr.jp/jj2013/

AMEI Web MIDI WG
Yamaha Corporation

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

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

● まとめ
AMEIについて
● 一般社団法人 音楽電子事業協会
○ MIDI規格を策定していたMIDI規格協議会(JMSC)が前
身で、1996年に社団法人化された。活動内容は、日本
国内においてMIDI規格の標準化、規格の策定、管理、
普及活動(MIDI検定試験)を行っている団体。
○ 2013年9月 Web MIDI Working Groupが発足し、Web
MIDI APIの規格策定・普及活動を積極的に行っていま
す。
MIDI
2013年でMIDIは30周年です!
● 1983年にNAMMで発表

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

速度:31.25kbps

●

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

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

(F0h‥F7h)
(Cnh)

▶ Status Byte
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)
メッセージの基本(3)
● System Exclusive(SysEx)
○ 電子楽器固有の機能を制御する為に使用
■ Voice、エフェクトのパラメータ等を送信
○ メッセージ
■ F0hで始まり、F7hで終わる
■ 可変長
F0h

<ID Number>

<Device ID>

・・・

○ ID Numnber (ManufactuererID)
■ 楽器メーカが持つ固有のID
●

取得には申請が必要 (申請先:AMEI(日本)、MMA)

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

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

Elton John Remote Live

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

● HTML5
○ HTMLの5回目の大幅な改訂版。
○ 文書作成のHTMLから、
OpenなアプリケーションのPlatformへ。
対応状況

注意
アドレスバーに ▼
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
シンプルなアプリケーション

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/musicdata/
TO MAKE THE END OF BATTLE / Ys2 © Falcom 1988
MIDI Data From : http://goo.gl/gxg4Cx
Web Audio APIアプリケーション
● Pitch Detect デモ
○ by Chris Wilson
● PowerChord Guitars デモ
○ by @aike1000

● Web Seuencer
○ by @g200kg

デモ
楽器以外を操作

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 APIとの組み合わせで無限大
○ Web Audio:例) オリジナルシンセが作れます
○ Web Speech:例) 音声認識+楽器
○ Web RTC:例) 遠隔地セッション、レッスン

● MIDIを楽器以外のデバイスに適応
○ アイデア次第で夢は膨らむ

Web RTC
補足
● 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/G9U8Mr
Google+ : http://goo.gl/BULcuo
Hackathonやります!
● Web Audio / MIDI がテーマ
○ 日程:2013年10月19日(土)
○ 場所:Google Japan オフィス

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

詳細はこちら

これらの画像はイメージす。
ご清聴ありがとうございました。

このスライドへのリンク

http://goo.gl/l35cZa

Más contenido relacionado

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

事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー
Monaca
 
Gadgetで実現する新世代UI/UX
Gadgetで実現する新世代UI/UXGadgetで実現する新世代UI/UX
Gadgetで実現する新世代UI/UX
FatWireKK
 
Web API 標準の OpenSocial の現状と今後
Web API 標準の OpenSocial の現状と今後Web API 標準の OpenSocial の現状と今後
Web API 標準の OpenSocial の現状と今後
FatWireKK
 
iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論
Takakuni Furukawa
 
CMS「Joomla!」セミナー2010年11月19日講演1
CMS「Joomla!」セミナー2010年11月19日講演1CMS「Joomla!」セミナー2010年11月19日講演1
CMS「Joomla!」セミナー2010年11月19日講演1
Joomla20101119
 
TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?
Masashi Umeda
 

Similar a Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013 (20)

事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー
 
Embedded Webで加速するWeb of Things
Embedded Webで加速するWeb of ThingsEmbedded Webで加速するWeb of Things
Embedded Webで加速するWeb of Things
 
Node-REDのノード開発容易化ツール Node generator
Node-REDのノード開発容易化ツールNode generatorNode-REDのノード開発容易化ツールNode generator
Node-REDのノード開発容易化ツール Node generator
 
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
 
Firefox OS 1.0 Application Development
Firefox OS 1.0 Application DevelopmentFirefox OS 1.0 Application Development
Firefox OS 1.0 Application Development
 
Gadgetで実現する新世代UI/UX
Gadgetで実現する新世代UI/UXGadgetで実現する新世代UI/UX
Gadgetで実現する新世代UI/UX
 
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
 
W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4
W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4
W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4
 
HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
 
Web API 標準の OpenSocial の現状と今後
Web API 標準の OpenSocial の現状と今後Web API 標準の OpenSocial の現状と今後
Web API 標準の OpenSocial の現状と今後
 
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
 
20110824 android apps_endo
20110824 android apps_endo20110824 android apps_endo
20110824 android apps_endo
 
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
 
iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論
 
アンドロイド勉強会第二回 080525 3
アンドロイド勉強会第二回  080525 3アンドロイド勉強会第二回  080525 3
アンドロイド勉強会第二回 080525 3
 
CMS「Joomla!」セミナー2010年11月19日講演1
CMS「Joomla!」セミナー2010年11月19日講演1CMS「Joomla!」セミナー2010年11月19日講演1
CMS「Joomla!」セミナー2010年11月19日講演1
 
Android登場10年目 ~Androidのイマを魅る~ 【ABC2017A】
Android登場10年目 ~Androidのイマを魅る~ 【ABC2017A】Android登場10年目 ~Androidのイマを魅る~ 【ABC2017A】
Android登場10年目 ~Androidのイマを魅る~ 【ABC2017A】
 
OpenChain Japan Work Group
OpenChain Japan Work GroupOpenChain Japan Work Group
OpenChain Japan Work Group
 
20110824 android apps_endo
20110824 android apps_endo20110824 android apps_endo
20110824 android apps_endo
 
TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?
 

Más de Ryoya Kawai

Más de Ryoya Kawai (10)

Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyoWeb audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
 
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
 
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporoWeb musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
 
Web MIDI meets DIY #0
Web MIDI meets DIY #0Web MIDI meets DIY #0
Web MIDI meets DIY #0
 
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
 
Making Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music ChinaMaking Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music China
 
Web music開発環境
Web music開発環境Web music開発環境
Web music開発環境
 
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1 Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
 
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
 
Chrome Packaged Apps
Chrome Packaged AppsChrome Packaged Apps
Chrome Packaged Apps
 

Último

Último (10)

論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 

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