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: 7 months 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 (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2021-09-02T17:24:17.000Z (about 4 years ago)
- Last Synced: 2024-11-17T04:34:50.493Z (12 months 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