SlideShare une entreprise Scribd logo
1  sur  7
Télécharger pour lire hors ligne
Web MIDI API 2nd WD
     Ryoya KAWAI
     @ryoyakawai
       Google+
Web MIDI APIとは

● W3Cが策定をしているHTML5のデバイスAPI
  に位置づけられる機能の1つで、ブラウザと
  MIDI機器を直接通信させる為のAPI群

● 2012年10月25日に初版が公開され、2012年
  12月13日に第二版が公開された

● 2012年Q3に勧告予定
初版から第二版での変更点

● 大きな変更点はなくmethodの統廃合が中心
 ○ MIDIPort: onconnect, ondisconnectが廃止
 ○ sendMIDIMessage()、sendMessage()がsend()に統合
 ○ MIDIEventはMIDIMessageの配列を持つInterfaceだっ
   たのが、内包されMIDIMessageは廃止


● サンプルスクリプトが追加
● プラグインを使ったエミュレーションライブラリ
  WebMIDIAPIShim(Polyfill)が公開
Web MIDI APIのブラウザへの実装状況

● まだどのブラウザにも実装はされていないが、
  Editorの1人であるChris WilsonはWebKit上で
  実装を進める予定であることを表明している
WebMIDIAPIShim(Polyfill)
● 仕組み
  ○ Jazz-Soft.netのJazz-PluginのwrapperがJavaScript化
    されている
  ○ JavaScriptのwrapperはWeb MIDI APIに準拠してい
    て、Web MIDI APIがブラウザに実装されている場合は
    そちらを使うような仕組みになっている



                   Jazz-Plugin

                    wrapper ( Polyfill : js )
                                      Web Browser
デモ:MIDI IN

MIDI鍵盤からの信号でブラウザ音源を鳴らす
            サンプルアプリ




             Jazz-Plugin

              wrapper ( Polyfill : js )
                                Web Browser
デモ:MIDI OUT

ブラウザからのMIDI信号でリアル音源を鳴らす
            サンプル動画@YouTube




              Jazz-Plugin

               wrapper ( Polyfill : js )
                                 Web Browser

Contenu connexe

Similaire à Web MIDI API 2nd WD

Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013Ryoya Kawai
 
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI APIChrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI APIRyoya Kawai
 
TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?Masashi Umeda
 
Let’s play windows 10 io t on raspberry pi !
Let’s play windows 10 io t on raspberry pi !Let’s play windows 10 io t on raspberry pi !
Let’s play windows 10 io t on raspberry pi !Masuda Tomoaki
 
160908 WIDE合宿講演「The Future of Music」
160908 WIDE合宿講演「The Future of Music」160908 WIDE合宿講演「The Future of Music」
160908 WIDE合宿講演「The Future of Music」Yukio TADA
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグKeisuke Todoroki
 
ソーシャルゲーム市場とアドビFlash戦略
ソーシャルゲーム市場とアドビFlash戦略ソーシャルゲーム市場とアドビFlash戦略
ソーシャルゲーム市場とアドビFlash戦略Andy Hall
 
2015/06/27 Remixing つらくないメディア間連携
2015/06/27 Remixing つらくないメディア間連携2015/06/27 Remixing つらくないメディア間連携
2015/06/27 Remixing つらくないメディア間連携Takumi Yoshida
 
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせKeisuke Todoroki
 
.NET 5 and Windows app dev
.NET 5 and Windows app dev.NET 5 and Windows app dev
.NET 5 and Windows app dev一希 大田
 
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKitHTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKitGeorge Harada
 
HTML5 によるロボット制御
HTML5 によるロボット制御HTML5 によるロボット制御
HTML5 によるロボット制御Honma Masashi
 
How to use Windows 11 effectively.pptx
How to use Windows 11 effectively.pptxHow to use Windows 11 effectively.pptx
How to use Windows 11 effectively.pptxAtomu Hidaka
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Eventdynamis
 
Juceで作るオーディオアプリケーション
Juceで作るオーディオアプリケーションJuceで作るオーディオアプリケーション
Juceで作るオーディオアプリケーションKohsuke Yuasa
 
7 つの Blazor
7 つの Blazor7 つの Blazor
7 つの Blazorm ishizaki
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaKeisuke Todoroki
 
Web is the OS (KDDI mugen Labo)
Web is the OS (KDDI mugen Labo)Web is the OS (KDDI mugen Labo)
Web is the OS (KDDI mugen Labo)dynamis
 
IoT Application Development by XPages on Bluemix
IoT Application Development by XPages on BluemixIoT Application Development by XPages on Bluemix
IoT Application Development by XPages on BluemixAtsushi Sato
 

Similaire à Web MIDI API 2nd WD (20)

Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
 
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI APIChrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
 
TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?TV・車・ゲームに搭載されているブラウザってどうなっているの?
TV・車・ゲームに搭載されているブラウザってどうなっているの?
 
Let’s play windows 10 io t on raspberry pi !
Let’s play windows 10 io t on raspberry pi !Let’s play windows 10 io t on raspberry pi !
Let’s play windows 10 io t on raspberry pi !
 
160908 WIDE合宿講演「The Future of Music」
160908 WIDE合宿講演「The Future of Music」160908 WIDE合宿講演「The Future of Music」
160908 WIDE合宿講演「The Future of Music」
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
 
ソーシャルゲーム市場とアドビFlash戦略
ソーシャルゲーム市場とアドビFlash戦略ソーシャルゲーム市場とアドビFlash戦略
ソーシャルゲーム市場とアドビFlash戦略
 
2015/06/27 Remixing つらくないメディア間連携
2015/06/27 Remixing つらくないメディア間連携2015/06/27 Remixing つらくないメディア間連携
2015/06/27 Remixing つらくないメディア間連携
 
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
 
.NET 5 and Windows app dev
.NET 5 and Windows app dev.NET 5 and Windows app dev
.NET 5 and Windows app dev
 
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKitHTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
 
HTML5 によるロボット制御
HTML5 によるロボット制御HTML5 によるロボット制御
HTML5 によるロボット制御
 
Win IoT on RPi デモ
Win IoT on RPi デモWin IoT on RPi デモ
Win IoT on RPi デモ
 
How to use Windows 11 effectively.pptx
How to use Windows 11 effectively.pptxHow to use Windows 11 effectively.pptx
How to use Windows 11 effectively.pptx
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Event
 
Juceで作るオーディオアプリケーション
Juceで作るオーディオアプリケーションJuceで作るオーディオアプリケーション
Juceで作るオーディオアプリケーション
 
7 つの Blazor
7 つの Blazor7 つの Blazor
7 つの Blazor
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
 
Web is the OS (KDDI mugen Labo)
Web is the OS (KDDI mugen Labo)Web is the OS (KDDI mugen Labo)
Web is the OS (KDDI mugen Labo)
 
IoT Application Development by XPages on Bluemix
IoT Application Development by XPages on BluemixIoT Application Development by XPages on Bluemix
IoT Application Development by XPages on Bluemix
 

Plus de Ryoya Kawai

Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporoWeb musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporoRyoya Kawai
 
Web MIDI meets DIY #0
Web MIDI meets DIY #0Web MIDI meets DIY #0
Web MIDI meets DIY #0Ryoya Kawai
 
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 ChinaRyoya Kawai
 
Web music開発環境
Web music開発環境Web music開発環境
Web music開発環境Ryoya Kawai
 
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1 Roppongi ArtTech Night #1
Roppongi ArtTech Night #1 Ryoya Kawai
 
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界Ryoya Kawai
 
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)Ryoya Kawai
 
Chrome Packaged Apps
Chrome Packaged AppsChrome Packaged Apps
Chrome Packaged AppsRyoya Kawai
 

Plus de Ryoya Kawai (8)

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
 
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
 
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
 
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
 

Web MIDI API 2nd WD