When your MIDI keyboard is not detected in the browser, the problem is rarely "the website is broken." More often, a charge-only USB cable, a denied Web MIDI permission, or a keyboard set to the wrong MIDI port blocks the signal before JavaScript ever sees note 60. Jazz practice makes the failure obvious—you press C–E–G–B for Cmaj7 and hear nothing while the metronome keeps swinging.
Work through this checklist from hardware to browser settings. Each step includes a quick test so you know when to move on.
How Web MIDI Is Supposed to Work
Modern practice sites use the Web MIDI API. The flow:
- Browser enumerates connected MIDI inputs via
navigator.requestMIDIAccess(). - User grants permission when prompted.
- Site subscribes to
midimessageevents on the chosen input port. - Key press sends bytes: status byte 0x90 (note on), note number, velocity.
If step 1 returns zero inputs, the issue is below the browser—cable, adapter, or OS recognition. If inputs appear but notes do not register, the issue is permission, wrong port selection, or app logic.
Step 1: Confirm the Keyboard Works Elsewhere
Before debugging Safari, isolate the controller:
- Connect via USB to a native app (GarageBand, a DAW, or the manufacturer's editor).
- Play middle C; confirm MIDI activity LED blinks on the keyboard.
- If nothing works anywhere, replace the cable or try a different USB port on the computer.
Charge-only cables are the number-one cause. They power the keyboard display but pass no data. Use the cable from the keyboard box.
Step 2: USB Connection Checklist
| Check | Pass criteria |
|---|---|
| Cable seated fully in keyboard and host | No wobble; try alternate port |
| Direct connection to computer/tablet (no unpowered hub) | Hub removed temporarily |
| Keyboard power on after cable connected | LED stable, not flashing |
| Class-compliant mode (no custom driver required) | Works in GarageBand without installer |
| Single MIDI port selected if multi-port device | Port "DAW" not "MIDI Out 2" by mistake |
iPad and iPhone users: follow device-specific wiring in connect MIDI keyboard to iPad and the iPhone connection guide—Lightning adapters fail more often than the keyboard itself.
Step 3: Browser Permission (Safari)
Safari on macOS and iOS prompts: "Allow this website to access MIDI devices?"
- Click Allow on first visit.
- If you clicked Don't Allow, reset: Safari → Settings → Websites → MIDI (macOS) or clear site data on iOS.
- Reload the page after changing permission.
- Ensure the page is served over HTTPS; some browsers restrict MIDI on insecure origins.
Step 4: Browser Permission (Chrome and Edge)
Chrome on desktop supports Web MIDI with a permission prompt in the address bar. If blocked:
- Click the lock icon in the address bar.
- Find MIDI or Site settings → MIDI devices → Allow.
- Reload and open the site's MIDI settings panel if one exists.
Chrome on iOS uses WebKit and may not expose MIDI on all versions. If Chrome fails, test Safari on the same device before concluding the keyboard is incompatible.
Step 5: Select the Correct Input Port
Some sites auto-select the first input. Multi-port interfaces (Focusrite, Roland) expose several names:
- Use: "Keyboard" or "USB MIDI" or the model name.
- Avoid: "DAW Out," "Thru," or duplicate ghost ports from previous sessions.
Unplug other MIDI devices temporarily. Port enumeration order changes when multiple inputs compete.
Step 6: Operating System Settings
macOS
Open Audio MIDI Setup → Window → Show MIDI Studio. The keyboard should appear as a USB node. Double-click to see active ports. If absent here, the browser cannot fix it—return to Step 2.
Windows
Check Device Manager under Sound, video and game controllers. "USB MIDI Device" or the brand name should appear without a yellow warning. Reinstall as generic USB MIDI if a wrong driver attached.
iOS / iPadOS
Settings → Bluetooth may list wired class-compliant keyboards. No listing suggests adapter or power issue, not browser bug.
Step 7: Keyboard Menu Settings
Factory menus cause silent failures:
- Local Control Off without software monitoring: you see MIDI in the app but hear nothing from the keyboard—expected, not a detection failure.
- USB mode set to "Storage" or "Firmware": switch to MIDI or normal play mode.
- MIDI channel not 1: some apps listen only to channel 1; reset keyboard to factory MIDI channel.
- Bluetooth paired while USB connected: disconnect Bluetooth to force USB routing.
Step 8: Test With a Minimal Web MIDI Page
If the practice site still fails, verify Web MIDI globally. Search for "Web MIDI test" from a reputable developer, or use a known diagnostic page that lists inputs and prints hex messages when you play a key.
Expected when pressing middle C: something like 90 3C 64 (note on, note 60, velocity 100). If the diagnostic page works but Jazzify does not, clear site cache and retry. If the diagnostic page also shows zero inputs, the problem remains hardware or OS level.
Step 9: Latency vs. Detection
Detection means notes appear; latency means they arrive late. Do not confuse them. Sluggish swing after detection succeeds belongs in reduce MIDI latency for piano, not this checklist.
Step 10: Jazz-Specific Verification
Once input works, confirm musical usability:
- Play Cmaj7 (C–E–G–B)—four distinct note-ons, no stuck notes after release.
- Press sustain pedal (CC 64)—all notes sustain; release pedal—all clear.
- Play Dm7–G7–Cmaj7 shells at q=80 with metronome; visual feedback matches each attack.
- Strike a chord at velocity 30, then 100—dynamic range registers if your app supports it.
Quick Reference: Symptom → Fix
| Symptom | Most likely fix |
|---|---|
| Zero inputs in any browser | Data cable or USB adapter |
| Inputs listed, no sound or score | Permission denied; reload after Allow |
| Works once, fails after sleep | Unplug/replug; wake keyboard before browser |
| Works in DAW, not browser | HTTPS, permission, try Safari vs Chrome |
| Random wrong notes | Bluetooth interference; switch to USB |
| Notes stick after release | Stuck sustain CC 64; replug, restart browser tab |
When to Replace Hardware
Replace the cable first—it is cheapest. Consider a new adapter if:
- Lightning generic OTG never passes MIDI on any device.
- Hub works for charging but keyboard never appears in MIDI Studio.
- Keyboard fails on three different computers with three known-good data cables.
Keyboard size does not affect detection. If you are upgrading during troubleshooting, see 61 vs. 88 keys for jazz piano for musical range considerations separate from connectivity.
Browser-Specific Notes (2026)
Safari on macOS: Web MIDI enabled by default for secure origins. Private Relay and content blockers rarely block MIDI but may block analytics—unrelated to input.
Firefox: Web MIDI support exists on desktop but is off by default in some builds. Enable dom.webmidi.enabled in about:config if you prefer Firefox over Chrome.
Edge: Chromium-based; behavior matches Chrome for permission prompts.
If your primary practice app targets Safari, test there first before assuming cross-browser bugs.
Preventing Recurrence
- Store one labeled "MIDI data" cable in your practice bag.
- Bookmark your practice URL; avoid retyping and landing on HTTP mirrors.
- After OS updates, run the 30-second middle C test before long sessions.
- Keep firmware updated via manufacturer tool on desktop, not during browser practice.
Summary
- Verify the keyboard in a native app before blaming the browser.
- Use data-capable USB cables and correct Lightning/USB-C adapters on mobile.
- Grant Web MIDI permission in Safari or Chrome and reload the page.
- Select the correct input port; disable conflicting Bluetooth connections.
- Confirm with chord and pedal tests before starting jazz comping practice.
Play the Jazzify demo right now
Connect a MIDI keyboard and play this interactive demo in your browser.
On iPhone and iPad, browsers cannot use a MIDI keyboard. Please use the Jazzify app instead.
