Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

redux-webmidi

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

redux-webmidi

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

  • 0.1.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

Cover Image

redux-webmidi

Npm Package License Dependency Status devDependency Status

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.

MessageStatus
Note Off0x80
Note On0x90
let {keys} = this.state.port[0];
keys.map( key => {
  if (key.status & 0x90) {
    playSound('./bee.wav');
  }
});

Keywords

FAQs

Package last updated on 06 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc