- The Web MIDI API in Chrome is being updated, with changes to the MIDIAccess interface starting in Chrome 39
- In older versions, inputs and outputs of MIDIAccess returned arrays, but in Chrome 39 and later they are attributes that return MIDIInputMap and MIDIOutputMap objects
- Code examples are provided to demonstrate accessing MIDI inputs and outputs in a way that is compatible with versions from Chrome 37 through the latest API update
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Web MIDI API updates in Chrome 39
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);