MIDIPort
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The MIDIPort
interface of the Web MIDI API represents a MIDI input or output port.
A MIDIPort
instance is created when a new MIDI device is connected. Therefore it has no constructor.
Instance properties
MIDIPort.id
Read only-
Returns a string containing the unique ID of the port.
MIDIPort.manufacturer
Read only-
Returns a string containing the manufacturer of the port.
MIDIPort.name
Read only-
Returns a string containing the system name of the port.
MIDIPort.type
Read only-
Returns a string containing the type of the port, one of:
MIDIPort.version
Read only-
Returns a string containing the version of the port.
MIDIPort.state
Read only-
Returns a string containing the state of the port, one of:
"disconnected"
-
The device that this
MIDIPort
represents is disconnected from the system. "connected"
-
The device that this
MIDIPort
represents is currently connected.
MIDIPort.connection
Read only-
Returns a string containing the connection state of the port, one of:
Instance methods
This interface also inherits methods from EventTarget
.
MIDIPort.open()
-
Makes the MIDI device connected to this
MIDIPort
explicitly available, and returns aPromise
which resolves once access to the port has been successful. MIDIPort.close()
-
Makes the MIDI device connected to this
MIDIPort
unavailable, changing thestate
from"open"
to"closed"
. This returns aPromise
which resolves once the port has been closed.
Events
statechange
-
Called when an existing port changes its state or connection.
Examples
List ports and their information
The following example lists input and output ports, and displays information about them using properties of MIDIPort
.
function listInputsAndOutputs(midiAccess) {
for (const entry of midiAccess.inputs) {
const input = entry[1];
console.log(
`Input port [type:'${input.type}'] id:'${input.id}' manufacturer: '${input.manufacturer}' name: '${input.name}' version: '${input.version}'`,
);
}
for (const entry of midiAccess.outputs) {
const output = entry[1];
console.log(
`Output port [type:'${output.type}'] id: '${output.id}' manufacturer: '${output.manufacturer}' name: '${output.name}' version: '${output.version}'`,
);
}
}
Add available ports to a select list
The following example takes the list of input ports and adds them to a select list, in order that a user can choose the device they want to use.
inputs.forEach((port, key) => {
const opt = document.createElement("option");
opt.text = port.name;
document.getElementById("port-selector").add(opt);
});
Specifications
Specification |
---|
Web MIDI API # MIDIPort |
Browser compatibility
BCD tables only load in the browser