Connect a MIDI keyboard to your browser
To use a MIDI keyboard in the browser, connect it by USB, open the page in Chrome, Edge or Firefox, and choose Allow when the browser asks about MIDI devices. Safari, and every browser on iPhone and iPad, cannot use MIDI keyboards.
To use a MIDI keyboard in your web browser, connect it to your computer by USB, open the page in Chrome, Edge or Firefox, and choose Allow when the browser asks about MIDI devices. Safari, and every browser on an iPhone or iPad, cannot connect to MIDI keyboards at all.
What you need
- A keyboard or digital piano with USB MIDI. Many keyboards and digital pianos have a "USB to host" socket (often square) and send notes over the USB cable; some have USB-C or micro-USB instead. Older instruments with only round five-pin MIDI sockets need a small MIDI-to-USB interface.
- A cable that fits both ends: often USB-B (the square end) to USB-A or USB-C for the computer.
- Chrome, Edge or Firefox on a computer, or Chrome on Android.
Step by step
- Connect the keyboard with the USB cable and switch it on.
- Open the web page in Chrome, Edge or Firefox. It must be the real browser window, not a preview inside another app.
- Choose the MIDI keyboard as your input, if the page asks.
- Allow MIDI. The browser shows a small prompt asking whether the site may use your MIDI devices. Choose Allow. (Firefox may word it differently, but asks the same thing.)
- Play a key. The key should light up on screen.
In Octotune, the app remembers your choice, so this happens once per browser.
If it doesn't work
The browser never asked, or you said no
A web page can't change browser permissions, and can't open the browser's settings for you. To allow MIDI yourself:
- Click the icon to the left of the web address (a padlock or a settings icon).
- Open Site settings or Permissions.
- Find MIDI devices and set it to Allow.
- Go back to the page. Octotune notices the change and connects by itself; elsewhere you may need to reload.
The keyboard doesn't appear
- Unplug and plug it back in, with the page open.
- Close other music software. On some computers only one program can use a MIDI keyboard at a time.
- Try another cable or USB port. Some cables carry power only.
- Check the keyboard's USB mode. Some instruments have a setting for "USB MIDI" or "USB audio"; it needs MIDI.
Notes arrive, but there's no sound
Most MIDI keyboards and controllers are silent through the computer by design: they send notes, and the app makes the sound. Check that the app's sound is on and that your computer's volume is up. A digital piano may also play through its own speakers, which is fine.
Everything is an octave out
Many keyboards have octave or transpose buttons. If middle C on the keys shows up as a different C on screen, reset them.
Notes feel late
A Bluetooth MIDI connection or Bluetooth headphones add a delay. For playing in time, a USB cable and wired speakers or headphones feel best.
iPad, iPhone and Mac Safari
Apple has never added Web MIDI to Safari, and every browser on an iPhone or iPad is built on Safari's engine. So there is no way for a web page to hear a MIDI keyboard on those devices today. On a Mac, use Chrome, Edge or Firefox instead of Safari.
On an iPad or iPhone, Octotune works with its on-screen piano: each finger is its own key, so you can hold a chord. Octotune's Kids mode is laid out for exactly that: an iPad standing on the music stand.
Android
Chrome on Android supports Web MIDI. Connect the keyboard with a USB cable and an adapter for the phone or tablet's socket (USB-C, or micro-USB with an "OTG" adapter), then allow MIDI when asked.
How Octotune helps
Octotune asks for MIDI only after you click, so the browser's prompt always appears. If MIDI is already blocked, it shows numbered steps for your browser and the address of the right settings page to copy, then connects on its own the moment you allow it, with no reload. Whatever happens, the computer keys and the on-screen piano still work, so you are never stuck. How Octotune works, or open Octotune.
Questions
Can I use a MIDI keyboard in the browser?
Yes, in Chrome, Edge and Firefox, through a standard called Web MIDI. The site has to ask your permission first. Safari does not support Web MIDI on any device.
Why can't my iPad see my MIDI keyboard in the browser?
Because Safari has no Web MIDI, and every browser on an iPad uses Safari's engine. A browser-based piano app can't hear a MIDI keyboard on an iPad; use its on-screen piano instead.
My keyboard is connected but I hear nothing. Why?
Most MIDI keyboards and controllers send notes but make no sound through the computer. The app has to play the sound. Check that the app's sound is on and your computer's volume is up.
I blocked MIDI by mistake. How do I allow it again?
Click the icon to the left of the web address, open the site's settings or permissions, find MIDI devices, and choose Allow. A web page can't change this for you.