web-midi-events

Shows how Web-MIDI events and messages are generated by the standard Web-MIDI W3C API and by the great WebMidi.js library.

W3C Standard API

WebMidi library

Notes

Opening / Closing a connection (a port)

Connection states:

https://www.w3.org/TR/webmidi/#idl-def-MIDIPortDeviceState

• open The device that MIDIPort represents has been opened (either implicitly or explicitly) and is available for use.
• closed The device that MIDIPort represents has not been opened, or has been explicitly closed. Until a MIDIPort has been opened either explicitly (through open()) or implicitly (by adding a midimessage event handler on an input port, or calling send() on an output port, this should be the default state of the device.
• pending The device that MIDIPort represents has been opened (either implicitly or explicitly), but the device has subsequently been disconnected and is unavailable for use. If the device is reconnected, prior to sending a statechange event, the system should attempt to reopen the device (following the algorithm to open a MIDIPort); this will result in either the connection state transitioning to "open" or to "closed".

Note: closed is the default state of a device.

Implicit opening:

https://www.w3.org/TR/webmidi/#widl-MIDIPort-open-Promise-MIDIPort

[...] calling send() on a MIDIOutput or attaching a MIDIMessageEvent handler on a MIDIInputPort will cause an implicit open().

Exemple:

15:10:35.931 w3c-events-debug.html:192 onMIDISuccess
15:10:35.938 w3c-events-debug.html:127 in  input  Midi Through Port-0 connected closed
15:10:35.939 w3c-events-debug.html:134 out output Midi Through Port-0 connected closed

15:10:37.531 w3c-events-debug.html:161 > onStateChangeHandler input VMPK Output connected closed

we attach a listener to this input:

15:10:37.532 w3c-events-debug.html:169 set onMidiMessageHandler
15:10:37.532 w3c-events-debug.html:127 in  input  Midi Through Port-0 connected closed
15:10:37.532 w3c-events-debug.html:127 in  input  VMPK Output connected closed
15:10:37.533 w3c-events-debug.html:134 out output Midi Through Port-0 connected closed

15:10:37.533 w3c-events-debug.html:161 > onStateChangeHandler output VMPK Input connected closed
15:10:37.533 w3c-events-debug.html:127 in  input  Midi Through Port-0 connected closed
15:10:37.533 w3c-events-debug.html:127 in  input  VMPK Output connected closed
15:10:37.533 w3c-events-debug.html:134 out output Midi Through Port-0 connected closed
15:10:37.534 w3c-events-debug.html:134 out output VMPK Input connected closed

the input's state has changed to open because of the listener we attached to it (implicit opening):

15:10:37.534 w3c-events-debug.html:161 > onStateChangeHandler input VMPK Output connected open
15:10:37.534 w3c-events-debug.html:127 in  input  Midi Through Port-0 connected closed
15:10:37.535 w3c-events-debug.html:127 in  input  VMPK Output connected open
15:10:37.535 w3c-events-debug.html:134 out output Midi Through Port-0 connected closed
15:10:37.535 w3c-events-debug.html:134 out output VMPK Input connected closed

the input's state is pending until we remove the listener attached to it:

15:13:13.657 w3c-events-debug.html:161 > onStateChangeHandler input VMPK Output disconnected pending
15:13:13.657 w3c-events-debug.html:178 remove onMidiMessageHandler
15:13:13.658 w3c-events-debug.html:127 in  input  Midi Through Port-0 connected closed
15:13:13.658 w3c-events-debug.html:134 out output Midi Through Port-0 connected closed
15:13:13.659 w3c-events-debug.html:134 out output VMPK Input connected closed

15:13:13.659 w3c-events-debug.html:161 > onStateChangeHandler output VMPK Input disconnected closed
15:13:13.660 w3c-events-debug.html:127 in  input  Midi Through Port-0 connected closed
15:13:13.661 w3c-events-debug.html:134 out output Midi Through Port-0 connected closed