Web MIDI API: Browser Support, Features, Limitations

What is the Web MIDI API?

The Web MIDI API is a W3C JavaScript API that lets a web page enumerate, read from, and send messages to Musical Instrument Digital Interface (MIDI) devices over USB and Bluetooth. The W3C Audio Working Group edits the spec, and pages call navigator.requestMIDIAccess to open the permission flow.

Which browsers does the Web MIDI API support?

Chromium-based desktop and mobile browsers, Samsung Internet, and Firefox 108+ ship the Web MIDI API, while Safari on macOS, Safari on iOS, and Internet Explorer leave it out, so global browser support sits near 78%.

What are the key features of the Web MIDI API?

The Web MIDI API is built around a permission-gated access object, MIDIInput and MIDIOutput port maps, and event-based message delivery. Every call runs in a secure HTTPS context on a top-level page or in an iframe the parent has unlocked through the midi Permissions-Policy.

• navigator.requestMIDIAccess: Pops the browser permission prompt and returns a Promise that resolves to a MIDIAccess. Pass an options bag with sysex: true to ask for System Exclusive read and write at the same time.
• MIDIAccess.inputs and MIDIAccess.outputs: Live MIDIInputMap and MIDIOutputMap iterables that list every connected port. Each entry exposes id, name, manufacturer, type, state, and connection so the page can pick the right device.
• MIDIInput.onmidimessage: Fires a MIDIMessageEvent every time the device sends a message. The event.data Uint8Array carries the raw status byte, channel, and data bytes for note on, note off, control change, and pitch bend.
• MIDIOutput.send(data, timestamp): Queues a Uint8Array of MIDI bytes to the device. The optional timestamp lets the page schedule notes against performance.now() for sample-accurate playback from a sequencer.
• MIDIAccess.onstatechange: Fires a MIDIConnectionEvent when a device is plugged in, unplugged, or has its connection state changed. Pages use it to keep the port list live without polling.
• SysEx permission: Pages must opt in with sysex: true and the user must approve a second prompt before the page can send or receive System Exclusive messages, which carry firmware updates and patch dumps.
• Permissions-Policy midi=self: Cross-origin iframes are blocked by default. The embedder must list midi in its Permissions-Policy header to unlock embedded use.
• USB MIDI and Bluetooth MIDI: The browser delegates to the OS MIDI stack, so any device the OS sees over USB-MIDI or Bluetooth MIDI shows up in the port map without extra setup or drivers.

How do you enable the Web MIDI API in your browser?

The Web MIDI API is on by default in Chrome, Edge, Opera, and Samsung Internet. Firefox needs a one-time Site Permission Add-On the first time a page asks for MIDI access. Safari on macOS and iOS does not expose any toggle to turn it on.

• Connect a MIDI device: Plug in a USB MIDI keyboard, controller, or interface, or pair a Bluetooth MIDI device through your OS Bluetooth settings before you load the page.
• Load the page over HTTPS: Web MIDI runs in secure contexts only. Open the page on an HTTPS origin, on http://localhost, or as a packaged extension. Plain http:// pages throw SecurityError on requestMIDIAccess.
• Run the request from a user gesture: Wire navigator.requestMIDIAccess to a click, keypress, or touch handler. Calling it from page-load script works in Chrome but the Firefox Site Permission Add-On dialog only triggers on real user activation.
• Approve the browser prompt: Click Allow when Chrome, Edge, Opera, or Samsung Internet shows the MIDI permission prompt. Firefox shows a one-time Add-On install dialog instead, and you must accept it before the API resolves.
• Approve SysEx separately: If the page passes sysex: true, accept the second prompt that asks for System Exclusive access. Refusing it gives back a MIDIAccess that lacks SysEx but still has note input and output.
• Confirm support: Open DevTools and run navigator.requestMIDIAccess().then(a => console.log([...a.inputs.values()])) to print the list of MIDI input ports the browser sees.

If the console says navigator.requestMIDIAccess is not a function, you are on Safari, iOS, or a Firefox version below 108. Switch to Chrome, Edge, Opera, or Firefox 108+, or fall back to a polyfill such as Jazz-Soft Jazz-Plugin or WebMIDIAPIShim for older builds.

What are the use cases of the Web MIDI API?

The Web MIDI API powers production apps that need direct, low-latency access to keyboards, drum pads, controllers, and synthesizers. Browser-based DAWs, music education platforms, and live performance tools all ship on it.

• Browser-based DAWs and sequencers: BandLab, Soundation, and Soundtrap record MIDI from connected keyboards and drum pads, then save the take to a cloud project for collaboration.
• Online music education: Skoove, Yousician, and Noteflight read note input from a MIDI keyboard during practice, score the timing and pitch, and feed back wrong notes in real time.
• Hardware controller editors and librarians: Web pages from Native Instruments and Novation Components edit patches and drum kits over SysEx, replacing legacy native installer apps with a tab.
• Live performance and DJ tools: Web tools map MIDI knobs and pads to clip launches, scene triggers, and effect sends inside a live set, with timestamp-driven scheduling against a Web Audio clock.
• Maker and STEAM education: Web pages drive Arduino, BBC micro:bit, and Teensy boards over USB-MIDI for classroom workshops with no install or app store account.
• Browser synthesizers: Pages from WebSynths, Viktor NV-1, and Tone.js render audio from MIDI input through the Web Audio API, turning any laptop with a USB keyboard into a synth.
• Lighting and stage automation: Lighting consoles that speak MIDI Show Control or MIDI Time Code hook into web-based cue editors over USB or Bluetooth MIDI.

Paste this snippet into the DevTools console of Chrome, Edge, Opera, or Firefox 108+ over HTTPS. Connect a MIDI keyboard, then play any note to see the raw status, note number, and velocity stream into the console.

// Paste this into the DevTools console of Chrome, Edge, Opera, or Firefox 108+ over HTTPS.
// Connect a MIDI keyboard or controller, then play any note.
if (navigator.requestMIDIAccess) {
  console.log("Web MIDI API is available.");

  navigator.requestMIDIAccess({ sysex: false }).then((access) => {
    for (const input of access.inputs.values()) {
      console.log("Input port:", input.name, "from", input.manufacturer);
      input.onmidimessage = (event) => {
        const [status, note, velocity] = event.data;
        console.log("status 0x" + status.toString(16), "note", note, "velocity", velocity);
      };
    }
    access.onstatechange = (event) => {
      console.log("Port", event.port.name, "is now", event.port.state);
    };
  }, (err) => {
    console.error("MIDI access failed:", err.message);
  });
} else {
  console.log("Web MIDI API is not supported in this browser.");
}

If the console prints Web MIDI API is not supported in this browser, you are on Safari, iOS, or a Firefox build older than 108. Fall back to a polyfill or guide users to Chrome, Edge, or Firefox 108+ for a smoother input path.

What are the limitations of the Web MIDI API?

The Web MIDI API has a smaller footprint than most modern device APIs. The painful edges show up around the Safari and iOS gap, the Firefox Site Permission Add-On flow, and the security rules layered on top of MIDI access.

• No Safari, no iOS, no iPadOS: WebKit has no Web MIDI code. Apple cited fingerprinting concerns. iPhone and iPad users need a third-party app like Web MIDI Browser that bundles its own MIDI stack. Chrome on iOS is just WebKit, so it inherits the gap.
• Firefox needs a Site Permission Add-On: Firefox 108+ supports Web MIDI, but the first call to requestMIDIAccess prompts users to install a generated add-on. Sites must educate users about the extra install step or the API request will silently stall.
• HTTPS only, no insecure contexts: navigator.requestMIDIAccess throws SecurityError on http:// and file:// pages. The API works on HTTPS origins and on http://localhost only, so local file demos must run through a dev server.
• SysEx is gated behind a second prompt: Pages that need System Exclusive must request it with sysex: true. Refusing the second prompt strips SysEx from the resolved MIDIAccess but keeps note input and output working.
• Permissions-Policy midi=self: Cross-origin iframes are blocked by default. The embedder must list midi in the Permissions-Policy header to let an embedded page use Web MIDI.
• Latency varies by OS and bus: USB MIDI on a modern laptop runs near 1 ms. Bluetooth MIDI adds 10 to 30 ms of jitter on top. Production music apps still warn Bluetooth users about timing drift on live takes.
• No Web MIDI 2.0 support yet: Chrome, Edge, Opera, and Firefox ship MIDI 1.0 only. The W3C is drafting MIDI 2.0 features such as per-note articulation and 32-bit velocity, but no browser ships the new protocol yet.
• Older Android phones miss USB host: Android phones that lack USB OTG host mode cannot enumerate USB-MIDI devices even on Chrome for Android. Test on the target device class before shipping.

In my experience, the trickiest failure is the Firefox Site Permission Add-On flow paired with a single-page app. A page that calls requestMIDIAccess on mount before the user has clicked anywhere never triggers the install dialog, so the Promise sits pending forever. Wire the call to a real button click and the dialog appears the first time.

Citations

All Web MIDI API version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - Web MIDI API: developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API
• MDN Web Docs - MIDIAccess interface: developer.mozilla.org/en-US/docs/Web/API/MIDIAccess
• W3C - Web MIDI API editor's draft: webaudio.github.io/web-midi-api
• W3C - Web MIDI API specification (TR): w3.org/TR/webmidi
• W3C Audio Working Group: w3.org/groups/wg/audio
• Mozilla Bugzilla - Enable dom.webmidi.enabled everywhere: bugzilla.mozilla.org/show_bug.cgi?id=1795025
• Mozilla dev-platform - Intent to ship Add-On-Gated WebMIDI: groups.google.com/a/mozilla.org/g/dev-platform
• WebKit Bugzilla - Web MIDI API tracking: bugs.webkit.org/show_bug.cgi?id=107250
• Chrome Platform Status - Web MIDI feature: chromestatus.com/feature/4761522611159040
• MIDI.org - About Web MIDI: midi.org/about-web-midi
• Wikipedia - MIDI: en.wikipedia.org/wiki/MIDI