Skip to the content.

Touch MIDI

‘Touch MIDI’ is a flexible MIDI control surface for touch based devices using HTML5.
The project consists of a set of custom HTML elements which allows the user to build a simple HTML page which can act as a MIDI controller. The elements represent various physical controls such as sliders and buttons, and can be configured to send a range of MIDI messages.

Currently supported MIDI messages:

An example layout showing four encoders, a button, a slider and the XY pad

This is complete rewrite of an older Touch MIDI project. It has been rewritten using web components (using the excellent Hybrids.js as a library), ES6 modules, WebPack and a much cleaner design.

Core technologies:

Design goals:

Supported Browsers

Although the Web MIDI API spec isn’t new (it was drafted in 2015) support for it is currently limited to Chrome, Edge and Opera

Mobile Chrome on an Android device has also been tested as working

User Guide

Getting started, you’ll need:

Upon opening the layout HTML, a configuration dialog will be shown, which allows the setup of some MIDI & other settings:

Device Layouts

A set of layouts is provided with the project. These are a demonstration of how to use the project, a reference set of working layouts, and created for my own music production use.

Device Layouts

Widgets / Controls

There are a range of controls available


A slider represents a fader type control as seen on a mixer, sliders can send MIDI CC and NRPN values.


An encoder represents a rotating knob control as seen on many synths and music devices, encoders can send MIDI CC and NRPN values. They are very similar to sliders in function but presented in a more compact form.


A button can fulfil a range of roles, it can trigger MIDI notes, as well as send fixed CC, NRPN values. Buttons can also be set to toggle on & off and send different values when released.

XY Pad

XY pads are similar to a sliders but work in two dimensions, so a pad can control a pair of CC values. A common use is to set a pad to modify the filter cutoff and resonance (e.g. MIDI CC 71 and 74)


A counter consists of two buttons, one for incrementing and decrementing an given CC value. Work in progress

Known Issues

Developer Guide

If you wish to create your own layout files, please refer to the developer reference guide

Advanced Usage

You can bypass the MIDI configuration dialog and automatially start the layout by passing parameters on the URL. To bypass the dialog add any of the following parameters to the URL.

Accepted URL parameters are:

Start the layout example.html on the default device and channel 7

Start the layout example.html on the device ‘output-2’ and channel 3

Start the layout example.html on the device ‘output-2’ and channel 5, with saving enabled

Note. Device IDs are automatically assigned by the operating system, and take the form output-n where n is an integer starting at 1, e.g. output-1, output-2 etc. You will get a warning if the device id is not found