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({
midi
});
const store = createStore(reducer);
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 = {
[index: number]: {
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');
}
});