redux-webmidi

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

npm i redux-webmidi -S

Usage

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

const reducer = combineReducers({
  // Your other reducers
  midi
});

const store = createStore(reducer);

// Wrap your store with a proxy provider
midiProvider(store);

import { connect } from 'react-redux';

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

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];
keys.map( key => {
  if (key.status & 0x90) {
    playSound('./bee.wav');
  }
});