JavaScript Navigator requestMIDIAccess() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word REQUESTMIDIACCESS

Definition

navigator.requestMIDIAccess() asks for access to MIDI devices (keyboards, controllers, synths). If permission is granted, the Promise resolves to a MIDIAccess object with inputs and outputs.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call navigator.requestMIDIAccess. Start with this line.

JavaScript
navigator.requestMIDIAccess(options?)
CallWhat it does
navigator.requestMIDIAccess(options?)Primary signature.
navigator.requestMIDIAccess(...)Call with the arguments your case needs.

Built into the browser. Call requestMIDIAccess(...) on a Navigator — no import required.

Library declarations
JavaScript
navigator.requestMIDIAccess(options?)

Parameters

ParameterDescription
MIDIOptionsOptional. sysex / software booleans (default false)
PermissionRequired. User prompt or prior grant; may be blocked by policy

Return Value

Return ValueDescription
*Promise → MIDIAccess

JavaScript Examples

Example 1 — Feature Detect

Check Web MIDI support and secure context before showing a Connect button.

JavaScript
const hasApi = typeof navigator.requestMIDIAccess === "function";
const secure = window.isSecureContext;

console.log(hasApi); // true in supporting browsers
console.log(secure); // true on HTTPS / localhost

if (!hasApi || !secure) {
  console.log("Web MIDI unavailable here");
}
Try It Yourself

How It Works

  1. Check the method. Missing function → hide MIDI UI.
  2. Check secure context. Web MIDI needs HTTPS (or localhost).
  3. Gate the button. Only prompt when both checks pass.
  4. Limited availability. Detection is required — not Baseline everywhere.

Example 2 — Request Access and List Ports

Ask for MIDI access, then count input and output ports (MDN-style).

JavaScript
async function listMidiPorts() {
  if (typeof navigator.requestMIDIAccess !== "function") {
    console.log("API unavailable");
    return;
  }
  try {
    const access = await navigator.requestMIDIAccess();
    const inputs = [...access.inputs.values()];
    const outputs = [...access.outputs.values()];
    console.log("inputs:", inputs.length);
    console.log("outputs:", outputs.length);
    inputs.forEach((port) => console.log("in:", port.name));
  } catch (err) {
    console.log(err.name); // e.g. "NotAllowedError"
  }
}

// Call from a button click
Try It Yourself

How It Works

  1. Request access. The browser may show a permission prompt.
  2. Read maps. inputs and outputs are Map-like collections of ports.
  3. Spread values. [...access.inputs.values()] gives an array to count/log.
  4. Catch denial. User or policy blocks become NotAllowedError.

Example 3 — Query midi Permission

When supported, check permission state before calling the API.

JavaScript
async function checkMidiPermission() {
  if (!navigator.permissions || !navigator.permissions.query) {
    console.log("Permissions API unavailable");
    return;
  }
  try {
    const result = await navigator.permissions.query({ name: "midi", sysex: false });
    console.log(result.state); // "granted" | "prompt" | "denied"
  } catch (err) {
    console.log("midi permission not queryable:", err.name);
  }
}

checkMidiPermission();
Try It Yourself

How It Works

  1. Use Permissions API. MDN shows { name: "midi", sysex }.
  2. Read state. prompt means the next access call may ask the user.
  3. Catch query failures. Not every browser exposes midi to permissions.query.
  4. Still request. Query is optional — requestMIDIAccess() is the real gate.
Compatibility

Browser Support

Navigator.requestMIDIAccess() is part of the Web MIDI API. MDN marks it Limited availability (not Baseline). Requires a secure context.

✓ Limited availability

Navigator.requestMIDIAccess()

Supported in Chromium-based browsers and some others with varying completeness. Safari historically lacked Web MIDI — always feature-detect.

Limited Not Baseline
Google Chrome Modern versions (secure context)
Yes
Microsoft Edge Modern versions (secure context)
Yes
Opera Modern versions (secure context)
Yes
Mozilla Firefox Limited / check version
Partial
Apple Safari Limited or unavailable
Partial
Internet Explorer Not supported
No
requestMIDIAccess() Feature-detect required

Bottom line: Ship MIDI UI only after detecting the method and handling permission errors. See the MDN requestMIDIAccess() reference.

Frequently Asked Questions

It asks the browser for access to MIDI devices. If permission is granted, the Promise resolves to a MIDIAccess object with inputs and outputs maps.
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It is Limited availability (not Baseline) and requires a secure context.
If MIDIOptions.sysex is true, the app may send and receive System Exclusive messages. The default is false. Sysex often needs extra permission scrutiny.
Usually yes on first use (or the browser reuses a previous choice). Access can also be blocked by the midi Permissions Policy.
After access resolves, iterate access.inputs.values() and access.outputs.values() to read MIDIInput / MIDIOutput ports (name, manufacturer, state, and more).
Often via navigator.permissions.query({ name: "midi", sysex: true|false }) when the Permissions API supports the midi permission in that browser.

Next: sendBeacon()

Learn how to send analytics beacons with navigator.sendBeacon().

sendBeacon() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Navigator requestMediaKeySystemAccess() Method JavaScript Navigator sendBeacon() Method