SlideShare a Scribd company logo
1 of 9
Download to read offline
Web MIDI API 
- API updates at Chrome 39 - 
Takashi Toyoshima <toyoshim@chromium.org>
Implementation Status 
Chrome 37 (stable) 
supports Web MIDI behind a flag* on all platforms 
(Windows, OS X, Linux, Chrome OS, Android) 
Note: Chrome OS 37 and 38 has a problem on udev that 
does not provide a right permission for /dev/snd/seq. We 
will fix 38. 
(*) chrome://flags/#enable-web-midi
API update at Chrome 39 
❏ Chrome implemented old API 
❏ 
❏ Chrome 39 implements the latest API 
❏ http://webaudio.github.io/web-midi-api/ 
It contains an important API change that breaks 
compatibility on MIDIAccess.inputs and MIDIAccess. 
outputs.
MIDIAccess 
❏ inputs and outputs were functions that returned an Array 
interface MIDIAccess : EventTarget { 
sequence<MIDIInput> inputs (); 
sequence<MIDIOutput> outputs (); 
readonly attribute boolean sysexEnabled; 
}; 
❏ inputs and outputs are attributes of MIDIInputMap and MIDIOutputMap 
interface MIDIAccess : EventTarget { 
readonly attribute MIDIInputMap inputs; 
readonly attribute MIDIOutputMap outputs; 
readonly attribute boolean sysexEnabled; 
};
JavaScript code examples 
/* Old version */ 
var inputs = access.inputs(); 
for (var i = 0; i < inputs.length; ++i) { 
if (inputs[i].name == “nice controller”) 
…… 
} 
/* New version with ES Harmony syntax from Chrome 38*/ 
for (var input of access.inputs.values()) { 
// Caveat: iteration order is not guaranteed for now 
if (input.name == “great controller”) 
…… 
}
MIDI{Input,Output}Map 
❏ Map like object (Map is a collection that is introduced in ECMAScript 6) 
interface { 
readonly attribute unsigned long size; 
MIDIKeyIterator keys (); // iterator for MIDIPort.id 
MIDIEntryIterator entries (); // iterator for [MIDIPort.id, MIDI{Input,Output}] 
MIDIValueIterator values (); // iterator for MIDI{Input,Output} 
MIDI{Input,Output} get (DOMString id); 
boolean has (DOMString key /* id */); 
void forEach (ForEachCallback callback); // not implemented yet 
};
Transitional code for 37-39 
var inputs = []; 
if (typeof midiAccess.inputs === "function") { 
// For OLD API used until Chrome 38 
inputs = midiAccess.inputs(); 
} else { 
// For 39 or later (Use next() since Chrome 37 can not parse ‘for...of’) 
var it = midiAccess.inputs.values(); 
for (var o = it.next(); !o.done; o = it.next()) 
inputs.push(o.value); 
} 
for (var i = 0; i < inputs.length; i++) 
console.log("MIDI interface: " + list[i].name);
MIDIConnectionEvent 
Not implemented yet, but we will introduce it 
from Chrome 39, step by step.
Stay tuned!

More Related Content

Viewers also liked (6)

140913_WebMusicHackathon_WMDC
140913_WebMusicHackathon_WMDC140913_WebMusicHackathon_WMDC
140913_WebMusicHackathon_WMDC
 
第2回html5jゲーム部勉強会 Oh! JavaScript 夢の続きを語ろうよ〜emscriptenの逆襲 - html5編
第2回html5jゲーム部勉強会   Oh! JavaScript 夢の続きを語ろうよ〜emscriptenの逆襲 - html5編第2回html5jゲーム部勉強会   Oh! JavaScript 夢の続きを語ろうよ〜emscriptenの逆襲 - html5編
第2回html5jゲーム部勉強会 Oh! JavaScript 夢の続きを語ろうよ〜emscriptenの逆襲 - html5編
 
Web Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conferenceWeb Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conference
 
Chrome Packaged Apps
Chrome Packaged AppsChrome Packaged Apps
Chrome Packaged Apps
 
VSTiつくるよゼミ
VSTiつくるよゼミVSTiつくるよゼミ
VSTiつくるよゼミ
 
USB MIDI - DMX bridge
USB MIDI - DMX bridgeUSB MIDI - DMX bridge
USB MIDI - DMX bridge
 

Similar to Web MIDI API update

WebKit, HTML5 media and GStreamer on multiple platforms
WebKit, HTML5 media and GStreamer on multiple platforms WebKit, HTML5 media and GStreamer on multiple platforms
WebKit, HTML5 media and GStreamer on multiple platforms
philn2
 
[WELC] 21. I’m Changing the Same Code All Over the Place
[WELC] 21. I’m Changing the Same Code All Over the Place[WELC] 21. I’m Changing the Same Code All Over the Place
[WELC] 21. I’m Changing the Same Code All Over the Place
종빈 오
 
Lec 47.48 - stream-files
Lec 47.48 - stream-filesLec 47.48 - stream-files
Lec 47.48 - stream-files
Princess Sam
 

Similar to Web MIDI API update (20)

Programming smart contracts in solidity
Programming smart contracts in solidityProgramming smart contracts in solidity
Programming smart contracts in solidity
 
I2C Drivers
I2C DriversI2C Drivers
I2C Drivers
 
WebKit, HTML5 media and GStreamer on multiple platforms
WebKit, HTML5 media and GStreamer on multiple platforms WebKit, HTML5 media and GStreamer on multiple platforms
WebKit, HTML5 media and GStreamer on multiple platforms
 
WebKit, HTML5 media and GStreamer on multiple platforms (GStreamer Conference...
WebKit, HTML5 media and GStreamer on multiple platforms (GStreamer Conference...WebKit, HTML5 media and GStreamer on multiple platforms (GStreamer Conference...
WebKit, HTML5 media and GStreamer on multiple platforms (GStreamer Conference...
 
Hidden Dragons of CGO
Hidden Dragons of CGOHidden Dragons of CGO
Hidden Dragons of CGO
 
[WELC] 21. I’m Changing the Same Code All Over the Place
[WELC] 21. I’m Changing the Same Code All Over the Place[WELC] 21. I’m Changing the Same Code All Over the Place
[WELC] 21. I’m Changing the Same Code All Over the Place
 
High performance web programming with C++14
High performance web programming with C++14High performance web programming with C++14
High performance web programming with C++14
 
JVM code reading -- C2
JVM code reading -- C2JVM code reading -- C2
JVM code reading -- C2
 
C++ via C#
C++ via C#C++ via C#
C++ via C#
 
Engineering Efficiency in LINE
Engineering Efficiency in LINEEngineering Efficiency in LINE
Engineering Efficiency in LINE
 
Production Time Profiling and Diagnostics on the JVM
Production Time Profiling and Diagnostics on the JVMProduction Time Profiling and Diagnostics on the JVM
Production Time Profiling and Diagnostics on the JVM
 
session6-Network Programming.pptx
session6-Network Programming.pptxsession6-Network Programming.pptx
session6-Network Programming.pptx
 
Parallel Futures of a Game Engine
Parallel Futures of a Game EngineParallel Futures of a Game Engine
Parallel Futures of a Game Engine
 
Pemrograman Jaringan
Pemrograman JaringanPemrograman Jaringan
Pemrograman Jaringan
 
Intro to Cuda
Intro to CudaIntro to Cuda
Intro to Cuda
 
Lec 47.48 - stream-files
Lec 47.48 - stream-filesLec 47.48 - stream-files
Lec 47.48 - stream-files
 
20151224-games
20151224-games20151224-games
20151224-games
 
programming language in c&c++
programming language in c&c++programming language in c&c++
programming language in c&c++
 
Cgi
CgiCgi
Cgi
 
Effective C++/WinRT for UWP and Win32
Effective C++/WinRT for UWP and Win32Effective C++/WinRT for UWP and Win32
Effective C++/WinRT for UWP and Win32
 

More from Takashi Toyoshima (6)

楽しいロリコン
楽しいロリコン楽しいロリコン
楽しいロリコン
 
z-music.js - AudioProcessorNode can do it
z-music.js - AudioProcessorNode can do itz-music.js - AudioProcessorNode can do it
z-music.js - AudioProcessorNode can do it
 
Oh! java script 夢の続きを語ろうよ〜emscriptenの逆襲
Oh! java script 夢の続きを語ろうよ〜emscriptenの逆襲Oh! java script 夢の続きを語ろうよ〜emscriptenの逆襲
Oh! java script 夢の続きを語ろうよ〜emscriptenの逆襲
 
Audio Context+ at WebAudio.tokyo #1
Audio Context+ at WebAudio.tokyo #1Audio Context+ at WebAudio.tokyo #1
Audio Context+ at WebAudio.tokyo #1
 
Web &amp; sound
Web &amp; soundWeb &amp; sound
Web &amp; sound
 
子供と使う便利ツール
子供と使う便利ツール子供と使う便利ツール
子供と使う便利ツール
 

Recently uploaded

valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
 
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdfpdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
JOHNBEBONYAP1
 
💚😋 Salem Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Salem Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋💚😋 Salem Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Salem Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
nirzagarg
 
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 

Recently uploaded (20)

All Time Service Available Call Girls Mg Road 👌 ⏭️ 6378878445
All Time Service Available Call Girls Mg Road 👌 ⏭️ 6378878445All Time Service Available Call Girls Mg Road 👌 ⏭️ 6378878445
All Time Service Available Call Girls Mg Road 👌 ⏭️ 6378878445
 
20240507 QFM013 Machine Intelligence Reading List April 2024.pdf
20240507 QFM013 Machine Intelligence Reading List April 2024.pdf20240507 QFM013 Machine Intelligence Reading List April 2024.pdf
20240507 QFM013 Machine Intelligence Reading List April 2024.pdf
 
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrStory Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
 
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
 
20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf
 
Dubai=Desi Dubai Call Girls O525547819 Outdoor Call Girls Dubai
Dubai=Desi Dubai Call Girls O525547819 Outdoor Call Girls DubaiDubai=Desi Dubai Call Girls O525547819 Outdoor Call Girls Dubai
Dubai=Desi Dubai Call Girls O525547819 Outdoor Call Girls Dubai
 
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency""Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
 
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
 
VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...
VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...
VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...
 
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdfpdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
 
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
 
💚😋 Salem Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Salem Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋💚😋 Salem Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Salem Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
 
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableCall Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
 
Trump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts SweatshirtTrump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts Sweatshirt
 
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
 
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...
 
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort ServiceBusty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
 
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting  High Prof...VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting  High Prof...
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...
 
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
 
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
 

Web MIDI API update

  • 1. Web MIDI API - API updates at Chrome 39 - Takashi Toyoshima <toyoshim@chromium.org>
  • 2. Implementation Status Chrome 37 (stable) supports Web MIDI behind a flag* on all platforms (Windows, OS X, Linux, Chrome OS, Android) Note: Chrome OS 37 and 38 has a problem on udev that does not provide a right permission for /dev/snd/seq. We will fix 38. (*) chrome://flags/#enable-web-midi
  • 3. API update at Chrome 39 ❏ Chrome implemented old API ❏ ❏ Chrome 39 implements the latest API ❏ http://webaudio.github.io/web-midi-api/ It contains an important API change that breaks compatibility on MIDIAccess.inputs and MIDIAccess. outputs.
  • 4. MIDIAccess ❏ inputs and outputs were functions that returned an Array interface MIDIAccess : EventTarget { sequence<MIDIInput> inputs (); sequence<MIDIOutput> outputs (); readonly attribute boolean sysexEnabled; }; ❏ inputs and outputs are attributes of MIDIInputMap and MIDIOutputMap interface MIDIAccess : EventTarget { readonly attribute MIDIInputMap inputs; readonly attribute MIDIOutputMap outputs; readonly attribute boolean sysexEnabled; };
  • 5. JavaScript code examples /* Old version */ var inputs = access.inputs(); for (var i = 0; i < inputs.length; ++i) { if (inputs[i].name == “nice controller”) …… } /* New version with ES Harmony syntax from Chrome 38*/ for (var input of access.inputs.values()) { // Caveat: iteration order is not guaranteed for now if (input.name == “great controller”) …… }
  • 6. MIDI{Input,Output}Map ❏ Map like object (Map is a collection that is introduced in ECMAScript 6) interface { readonly attribute unsigned long size; MIDIKeyIterator keys (); // iterator for MIDIPort.id MIDIEntryIterator entries (); // iterator for [MIDIPort.id, MIDI{Input,Output}] MIDIValueIterator values (); // iterator for MIDI{Input,Output} MIDI{Input,Output} get (DOMString id); boolean has (DOMString key /* id */); void forEach (ForEachCallback callback); // not implemented yet };
  • 7. Transitional code for 37-39 var inputs = []; if (typeof midiAccess.inputs === "function") { // For OLD API used until Chrome 38 inputs = midiAccess.inputs(); } else { // For 39 or later (Use next() since Chrome 37 can not parse ‘for...of’) var it = midiAccess.inputs.values(); for (var o = it.next(); !o.done; o = it.next()) inputs.push(o.value); } for (var i = 0; i < inputs.length; i++) console.log("MIDI interface: " + list[i].name);
  • 8. MIDIConnectionEvent Not implemented yet, but we will introduce it from Chrome 39, step by step.