https://github.com/halvves/react-midi-device-provider

web midi utilities for react
https://github.com/halvves/react-midi-device-provider

midi react web-audio web-midi

Last synced: 15 days ago
JSON representation

web midi utilities for react

• Host: GitHub
• URL: https://github.com/halvves/react-midi-device-provider
• Owner: halvves
• License: mit
• Created: 2017-11-05T23:46:14.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2021-09-02T17:24:17.000Z (over 3 years ago)
• Last Synced: 2024-11-17T04:34:50.493Z (25 days ago)
• Topics: midi, react, web-audio, web-midi
• Language: JavaScript
• Size: 39.1 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-javascript-audio - react-midi-device-provider - simple MIDI device/messages handler for react (UI components and libraries / React components)

README

        
# MidiDeviceProvider

[![Latest NPM release][npm-badge]][npm-badge-url]

[![Build Status][travis-badge]][travis-badge-url]

## Installation

`yarn add react-midi-device-provider` or `npm i -P react-midi-device-provider`

## Usage

Wrap all/part of your application in ``.

```javascript

import React from 'react'

import { render } from 'react-dom';

import { MidiDeviceProvider } from 'react-midi-device-provider';

const appElement = document.getElementById('app');

render(

  

    

  ,

  appElement

);

```

Then... expose `midi`, `setMidiInput`, and `setMidiOutput` to your components using `withMidi(Component)`;

### Examples:

#### MidiDeviceSwitcher

```javascript

import React, { PureComponent } from 'react';

import PropTypes from 'prop-types';

import { withMidi } from 'react-midi-device-provider';

class MidiDeviceSwitcher extends PureComponent {

  constructor() {

    super();

    this.handleInputChange = this.handleInputChange.bind(this);

    this.handleOutputChange = this.handleOutputChange.bind(this);

  }

  static propTypes = {

    midi: PropTypes.object,

    setMidiInput: PropTypes.func,

    setMidiOutput: PropTypes.func

  }

  handleInputChange(e) {

    const { setMidiInput } = this.props;

    setMidiInput(e.target.value);

  }

  handleOutputChange(e) {

    const { setMidiOutput } = this.props;

    setMidiOutput(e.target.value);

  }

  render() {

    const {

      inputs,

      outputs,

      selectedInput,

      selectedOutput

    } = this.props.midi;

    return (

      


        


          
Inputs

          

            {inputs.map(i => {i.name})}

          

          {selectedInput && ` - ${selectedInput.name}`}

        

        


          
Outputs

          

            {outputs.map(o => {o.name})}

          

          {selectedOutput && ` - ${selectedOutput.name}`}

        

      

    );

  }

}


export default withMidi(MidiDeviceSwitcher);

```

#### MidiParamSlider

```javascript

import React, { PureComponent } from 'react';

import PropTypes from 'prop-types';

import { withMidi } from 'react-midi-device-provider';

class MidiParamSlider extends PureComponent {

  constructor() {

    super();

    this.handleChange = this.handleChange.bind(this);

  }

  static propTypes = {

    channel: PropTypes.number,

    max: PropTypes.number,

    min: PropTypes.number,

    midi: PropTypes.object.isRequired

  }

  static defaultProps = {

    channel: 0x10,

    max: 127,

    min: 0

  }

  handleChange(e) {

    const { channel, midi } = this.props;

    const { selectedOutput } = midi;

    if (selectedOutput && typeof selectedOutput.send === 'function') {

      selectedOutput.send([0xb0, channel, Math.floor(e.target.value)]);

    }

  }

  render() {

    const { max, min } = this.props;

    return (

      


        

      

    );

  }

}


export default withMidi(MidiParamSlider);

```

[npm-badge]: https://img.shields.io/npm/v/react-midi-device-provider.svg

[npm-badge-url]: https://www.npmjs.com/package/react-midi-device-provider

[travis-badge]: https://travis-ci.org/halvves/react-midi-device-provider.svg?branch=master

[travis-badge-url]: https://travis-ci.org/halvves/react-midi-device-provider