navigator.requestMIDIAccess() is the Web MIDI entry point for talking to MIDI keyboards and controllers in the browser. Learn the Promise result, inputs/outputs, sysex options, permissions, five examples, and try-it labs.
Method
Promise<MIDIAccess>
Limited (not Baseline)
Secure (HTTPS)
sysex / software
midi
MIDI (Musical Instrument Digital Interface) connects keyboards, pads, and synths. The Web MIDI API lets a webpage listen for notes and send MIDI messages without a native plugin.
Call navigator.requestMIDIAccess() (optionally with options). If the user allows access, you get a MIDIAccess object and can enumerate inputs and outputs.
MDN marks Limited availability and a secure context, but not Deprecated, Experimental, or Non-standard. Always feature-detect and handle permission denial.
requestMIDIAccess() Method{ sysex, software }.MIDIAccess.Map-like collections of MIDI ports.midi Permissions Policy.statechange on MIDIAccess when devices connect/disconnect.General forms of the method:
navigator.requestMIDIAccess()
navigator.requestMIDIAccess(MIDIOptions)MIDIOptions (optional) — object with:sysex — true to allow System Exclusive messages (default false).software — true to allow software synthesizers (default false).Promise that fulfills with a MIDIAccess object.SecurityError — permission / policy denial.NotSupportedError — feature or options not supported.InvalidStateError — document closed / navigation issues.AbortError — underlying system errors in some cases.const access = await navigator.requestMIDIAccess();
const inputs = access.inputs.values();
const outputs = access.outputs.values();
for (const input of inputs) {
console.log("input:", input.name);
}
for (const output of outputs) {
console.log("output:", output.name);
}| Goal | Code |
|---|---|
| Feature detect | typeof navigator.requestMIDIAccess === "function" |
| Request access | await navigator.requestMIDIAccess() |
| Allow sysex | await navigator.requestMIDIAccess({ sysex: true }) |
| Count inputs | access.inputs.size |
| Iterate ports | for (const p of access.inputs.values()) { … } |
| Query permission | navigator.permissions.query({ name: "midi" }) |
Four facts to remember about navigator.requestMIDIAccess().
PromiseMIDIAccess
LimitedNot Baseline
HTTPSSecure required
in / outMIDI maps
Default (sysex: false) | With sysex: true | |
|---|---|---|
| Typical messages | Notes, CC, program change | Plus System Exclusive dumps / device setup |
| Permission | Standard MIDI access | Often stricter / separate sysex consideration |
| Beginner apps | Start here | Only when you need manufacturer sysex |
Try It Yourself may prompt for MIDI permission on HTTPS. Without a connected controller you still get a valid MIDIAccess with empty (or system) port lists.
Detect Web MIDI and request access.
Check the method and secure context before prompting.
const lines = [
"requestMIDIAccess: " +
(typeof navigator.requestMIDIAccess === "function"
? "available"
: "missing"),
"isSecureContext: " + window.isSecureContext
];
console.log(lines.join("\n"));If either check fails, show a non-MIDI fallback (virtual keyboard UI).
Resolve MIDIAccess and report how many inputs and outputs exist.
async function countMidiPorts() {
if (typeof navigator.requestMIDIAccess !== "function") {
return "Web MIDI not supported";
}
try {
const access = await navigator.requestMIDIAccess();
return JSON.stringify({
inputs: access.inputs.size,
outputs: access.outputs.size,
sysexEnabled: access.sysexEnabled
});
} catch (err) {
return "Error: " + err.name;
}
}
countMidiPorts().then(console.log);Empty counts are normal on a laptop without a MIDI controller plugged in.
List port names, query permission, and wrap errors safely.
Iterate inputs.values() and outputs.values() like the MDN sample.
async function listMidiPorts() {
const access = await navigator.requestMIDIAccess();
const inputNames = [];
const outputNames = [];
for (const input of access.inputs.values()) {
inputNames.push(input.name || "(unnamed input)");
}
for (const output of access.outputs.values()) {
outputNames.push(output.name || "(unnamed output)");
}
return JSON.stringify({ inputNames, outputNames });
}
listMidiPorts().then(console.log).catch((err) => {
console.log("Error: " + err.name);
});Attach midimessage listeners on inputs once you know which port to use.
Check permission state when the Permissions API supports midi.
async function queryMidiPermission() {
if (!navigator.permissions || !navigator.permissions.query) {
return "Permissions API missing";
}
try {
const result = await navigator.permissions.query({ name: "midi", sysex: false });
return "midi permission: " + result.state;
} catch (err) {
return "Error: " + err.name + " (midi permission may be unsupported here)";
}
}
queryMidiPermission().then(console.log);Use this to decide whether to show a “Enable MIDI” button before calling the API.
Feature-detect, request on a user gesture path, and return structured errors.
async function requestMidiAccessSafe(options) {
if (typeof navigator.requestMIDIAccess !== "function") {
return { ok: false, access: null, reason: "unsupported" };
}
if (!window.isSecureContext) {
return { ok: false, access: null, reason: "insecure-context" };
}
try {
const access = await navigator.requestMIDIAccess(options || {});
return {
ok: true,
access: access,
reason: "ok",
inputs: access.inputs.size,
outputs: access.outputs.size
};
} catch (err) {
return { ok: false, access: null, reason: err.name };
}
}
requestMidiAccessSafe({ sysex: false }).then((result) => {
console.log(JSON.stringify({
ok: result.ok,
reason: result.reason,
inputs: result.inputs || 0,
outputs: result.outputs || 0
}));
});Prefer calling this from a button click so the permission prompt feels intentional.
requestMIDIAccess() WorksOptionally pass { sysex, software }.
Permission prompt or previous choice; policy may deny.
Inspect inputs and outputs maps.
Handle midimessage or output.send([...]).
midi permission / policy.navigator.requestMIDIAccess() is part of the Web MIDI API and is not Baseline. Support is strongest in Chromium-based browsers on HTTPS. Always feature-detect, request permission intentionally, and provide a virtual-keyboard fallback.
Promise → MIDIAccess for MIDI inputs and outputs.
Bottom line: Detect the method on a secure page, request access from a button click, list inputs/outputs, and catch SecurityError when permission is denied.
navigator.requestMIDIAccess() opens the Web MIDI API. Request it on HTTPS, handle permission carefully, then enumerate inputs and outputs to build interactive music tools — with a non-MIDI fallback when the API is missing.
Continue with sendBeacon(), getGamepads(), or the JavaScript hub.
sysex: false unless neededstatechange when devices plug inSecurityError denialssizerequestMIDIAccess()Limited Web MIDI entry point — request access, then use inputs and outputs.
MIDIAccess
PromiseLimited
Not BaselineHTTPS + permission
midiinputs / outputs
Mapssysex
Opt-inMIDI messages are tiny binary packets (often three bytes for a note-on). Web MIDI delivers them as Uint8Array data on midimessage events — perfect for pairing with the Web Audio API.
Send reliable analytics on page hide without slowing navigation.
8 people found this page helpful