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

6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
@Chandigarh #call #Girls 9053900678 @Call #Girls in @Punjab 9053900678
 
Call Girls In Pratap Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Pratap Nagar Delhi 💯Call Us 🔝8264348440🔝Call Girls In Pratap Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Pratap Nagar Delhi 💯Call Us 🔝8264348440🔝
soniya singh
 
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
Diya Sharma
 
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
imonikaupta
 
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
 
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
 
Call Girls In Sukhdev Vihar Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Sukhdev Vihar Delhi 💯Call Us 🔝8264348440🔝Call Girls In Sukhdev Vihar Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Sukhdev Vihar Delhi 💯Call Us 🔝8264348440🔝
soniya singh
 

Recently uploaded (20)

GDG Cloud Southlake 32: Kyle Hettinger: Demystifying the Dark Web
GDG Cloud Southlake 32: Kyle Hettinger: Demystifying the Dark WebGDG Cloud Southlake 32: Kyle Hettinger: Demystifying the Dark Web
GDG Cloud Southlake 32: Kyle Hettinger: Demystifying the Dark Web
 
VVVIP Call Girls In Connaught Place ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
VVVIP Call Girls In Connaught Place ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...VVVIP Call Girls In Connaught Place ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
VVVIP Call Girls In Connaught Place ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
 
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...
 
Hot Call Girls |Delhi |Hauz Khas ☎ 9711199171 Book Your One night Stand
Hot Call Girls |Delhi |Hauz Khas ☎ 9711199171 Book Your One night StandHot Call Girls |Delhi |Hauz Khas ☎ 9711199171 Book Your One night Stand
Hot Call Girls |Delhi |Hauz Khas ☎ 9711199171 Book Your One night Stand
 
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...
 
(+971568250507 ))# Young Call Girls in Ajman By Pakistani Call Girls in ...
(+971568250507  ))#  Young Call Girls  in Ajman  By Pakistani Call Girls  in ...(+971568250507  ))#  Young Call Girls  in Ajman  By Pakistani Call Girls  in ...
(+971568250507 ))# Young Call Girls in Ajman By Pakistani Call Girls in ...
 
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
 
Call Girls In Pratap Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Pratap Nagar Delhi 💯Call Us 🔝8264348440🔝Call Girls In Pratap Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Pratap Nagar Delhi 💯Call Us 🔝8264348440🔝
 
Call Now ☎ 8264348440 !! Call Girls in Rani Bagh Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Rani Bagh Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Rani Bagh Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Rani Bagh Escort Service Delhi N.C.R.
 
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)
 
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
 
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
 
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...
 
On Starlink, presented by Geoff Huston at NZNOG 2024
On Starlink, presented by Geoff Huston at NZNOG 2024On Starlink, presented by Geoff Huston at NZNOG 2024
On Starlink, presented by Geoff Huston at NZNOG 2024
 
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
 
'Future Evolution of the Internet' delivered by Geoff Huston at Everything Op...
'Future Evolution of the Internet' delivered by Geoff Huston at Everything Op...'Future Evolution of the Internet' delivered by Geoff Huston at Everything Op...
'Future Evolution of the Internet' delivered by Geoff Huston at Everything Op...
 
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
 
Call Girls In Sukhdev Vihar Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Sukhdev Vihar Delhi 💯Call Us 🔝8264348440🔝Call Girls In Sukhdev Vihar Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Sukhdev Vihar Delhi 💯Call Us 🔝8264348440🔝
 
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...
 
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
 

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.