redux-midi

A store enhancer and set of action creators wrapping the Web MIDI API for use in Redux apps.

This is the API documentation. More information is available on the module's GitHub repo.

receiveDeviceList

Creates a RECEIVE_DEVICE_LIST action. This action is dispatched by the MIDI enhancer at initialization, when devices are connected/disconnected and when devices change state.

receiveDeviceList
Parameters
devices (Array<MIDIDevice>)

setListeningDevices

Creates a SET_LISTENING_DEVICES action. Dispatch this action with the ids of MIDI input devices you would like to receive messages from.

setListeningDevices
Parameters
listeningDevices (Array<string>)

receiveMidiMessage

Creates a RECEIVE_MIDI_MESSAGE action. This action is dispatched by the MIDI enhancer when a message received from a device you're listening to.

receiveMidiMessage
Parameters
message (MIDIMessage)
Name Description
message.data Uint8Array
message.timestamp DOMHighResTimeStamp
message.device string ID of the source device

sendMidiMessage

Creates a SEND_MIDI_MESSAGE action. Dispatch this action to send a MIDI message to a specified device.

sendMidiMessage
Parameters
message (MIDIMessage)
Name Description
message.data Uint8Array
message.timestamp DOMHighResTimeStamp
message.device string ID of the destination device

reducer

Reduces MIDI I/O and device discovery actions to state changes. Maintains state in two keys: devices (an array of device objects straight from the underlying Web MIDI API) and listeningDevices (an array of device IDs being listened to).

reducer
Example
import { createStore, applyMiddleware, combineReducers } from 'redux';
import setup, { reducer } from 'redux-midi';
const {inputMiddleware, outputMiddleware} = setup();
const store = createStore(combineReducers({midi: reducer}), initialState, applyMiddleware(inputMiddleware, outputMiddleware));

index

Create a pair of Redux middleware functions wrapping MIDI I/O and device discovery. The input middleware dispatches RECEIVE_DEVICE_LIST whenever the list of MIDI devices changes and RECEIVE_MIDI_MESSAGE when MIDI messages are received on devices that are being listened to. The output middleware sends MIDI messages to output devices as a side effect of SEND_MIDI_MESSAGE actions.

index
Parameters
$0 (Object)
Name Description
$0.midiOptions [MIDIOptions] Options with which to invoke requestMIDIAccess .
$0.stateKey [string] (default 'midi') The state key at which redux-midi's reducer is mounted.
$0.requestMIDIAccess [function (MIDIOptions): Promise<MIDIAccess>] (default navigator.requestMIDIAccess) Web MIDI API entry point.
Example
import { createStore, applyMiddleware, combineReducers } from 'redux';
import setup, { reducer } from 'redux-midi';
const {inputMiddleware, outputMiddleware} = setup();
const store = createStore(combineReducers({midi: reducer}), initialState, applyMiddleware(inputMiddleware, outputMiddleware));