🎹 Intuitive Redux reducer/action creators for handling MIDI devices.

Usage no npm install needed!

<script type="module">
  import reduxWebmidi from '';


Cover Image


Npm Package License Dependency Status devDependency Status

An intuitive Redux reducer/action creators for handling MIDI devices.

npm i redux-webmidi -S


import { createStore, combineReducers } from 'redux';
import { midiReducer as midi, midiProvider } from 'redux-webmidi';

const reducer = combineReducers({
  // Your other reducers

const store = createStore(reducer);

// Wrap your store with a proxy provider

import { connect } from 'react-redux';

@connect((state) => ({midi: state.midi}))
let App = ({ midi }) => (
    {, i) => <InstrumentView data={c} key={i}/>)}
    <Synth keys={(midi.ports[0]) ? midi.ports[0].keys : null}/>

Data Layout

type KeyMap = {
  // The index is the key on the keyboard.
  [index: number]: {
    // The status keycode
    status: number,
    velocity: number

type MidiDevice = {
  id: number,
  name: string,
  manufacturer: string,
  state: 'connected' | 'disconnected',
  type: 'input' | 'output' | 'input/output',
  keys: KeyMap

type WebMidiState = {
  ports: MidiDevice[]

Refer to the official Midi specification or WebMidi specification if you have any other questions.

The first byte (denoted as zero in all examples in the table) describes the midi channel, whereas the larger byte describes the actual message.

Message Status
Note Off 0x80
Note On 0x90
let {keys} = this.state.port[0]; key => {
  if (key.status & 0x90) {