Connect any hardware MIDI device to your browser. Route notes, CC, and transport commands to WAVR PRO or any Web Audio application. Live piano display, CC bar graph, configurable mappings, MIDI log.
Wraps the Web MIDI API as a self-contained plugin. Works standalone or registered inside WAVR PRO — same class, same API either way.
onstatechange.HOT-PLUG
setState().ROUTING
onTransport callback and,
when in WAVR PRO, toggle the host transport.TRANSPORT
Every MIDI message travels through a single well-defined path. No polling, no timers — events are delivered by the browser's MIDI runtime.
navigator.requestMIDIAccess()
Three built-in mappings cover the most common use cases. Add custom
targets in the UI, or pass a
ccMap object into
setState().
onCC callback.
getState() /
setState(). WAVR PRO
restores them when the plugin is reopened.
mc.setState({
ccMap: {
1: "bpm",
7: "master_volume",
64: "transport_toggle",
74: "my_custom_target",
}
});
mc.onCC = ({ cc, value }) => {
if (cc === 74) {
myFilter.frequency.value =
200 + value * 120;
}
};
Standalone in any framework, or registered in WAVR PRO. The API is identical either way.
// npm npm install wavr-midi-controller // standalone import MidiController from 'wavr-midi-controller'; const mc = new MidiController({ onNote: ({ note, velocity, type }) => { console.log(type, note, velocity); }, onCC: ({ cc, value }) => { // react to any CC }, onTransport: ({ command }) => { // "start" | "stop" | "continue" }, onConnect: (port) => {}, onDisconnect: (port) => {}, }); mc.mount(document.getElementById('container')); // WAVR PRO plugin pluginManager.register(MidiController); // Opens as a drawer from the topbar.
| Browser | Web MIDI | Notes |
|---|---|---|
| Chrome 43+ | ✓ Native | Full support |
| Edge 79+ | ✓ Native | Full support |
| Firefox | ✗ | No native support |
| Safari | ✗ | No native support |
| iOS Safari | ✗ | No native support |
navigator.requestMIDIAccess()
is blocked on http://. The
plugin works on
https:// and
localhost. GitHub Pages is
HTTPS by default.
Download, register, and your hardware MIDI device is talking to WAVR PRO.