Connect a MIDI keyboard to your browser
To use a MIDI keyboard in your web browser, connect it to your computer by USB, open Octotune in Chrome, Edge or Firefox, select the keyboard as your input, and choose Allow when the browser asks about MIDI devices. Safari does not support Web MIDI. You can always use Octotune's on-screen piano instead.
Browser and device support
| Browser and device | USB MIDI in the browser | What to use |
|---|---|---|
| Chrome, Edge or Firefox on a computer | Supported, with your permission | USB keyboard and the browser's MIDI permission |
| Chrome on Android | Supported, with your permission | USB keyboard and an adapter that supports data |
| Safari on Mac | Not supported | Chrome, Edge or Firefox on the same Mac |
| Safari on iPhone or iPad | Not supported | Octotune's on-screen piano, or a computer with a supported browser |
Support depends on the browser providing Web MIDI, not just on a cable fitting the device. Keep your browser up to date. Other browsers and embedded previews can differ; MDN's Web MIDI compatibility reference lists the underlying support. Octotune is also available as a downloaded iPhone and iPad app. That is separate from browser MIDI support; see iPhone and iPad setup and keyboard help.
Open Octotune and choose your keyboard, then follow the steps below.
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.
Still choosing a keyboard? Choosing a keyboard covers the number of keys, weighted keys and the sockets to look for.
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
Safari does not provide Web MIDI on Mac, iPhone or iPad. On a Mac, use Chrome, Edge or Firefox instead. On mobile devices, check the actual browser's Web MIDI support rather than assuming that its name or a different USB adapter makes it compatible.
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?
Safari on iPad does not support Web MIDI. Use Octotune's on-screen piano, or connect the keyboard to a computer running Chrome, Edge or Firefox. Changing the cable cannot add MIDI support to a browser that lacks it.
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.