https://github.com/glenndehaan/webmidi-mapper
An expansion to the original webmidi package to map devices in a simple way
https://github.com/glenndehaan/webmidi-mapper
es6 javascript mapper webmidi webmidiapi
Last synced: 5 months ago
JSON representation
An expansion to the original webmidi package to map devices in a simple way
- Host: GitHub
- URL: https://github.com/glenndehaan/webmidi-mapper
- Owner: glenndehaan
- License: mit
- Created: 2017-11-08T12:09:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-29T19:24:13.000Z (about 5 years ago)
- Last Synced: 2025-10-22T12:56:48.002Z (8 months ago)
- Topics: es6, javascript, mapper, webmidi, webmidiapi
- Language: JavaScript
- Size: 108 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Web Midi Mapper
An expansion to the original webmidi package to map devices in a simple way
[](https://www.npmjs.com/package/webmidi-mapper)  
## Functionalities
* Provides an extension to the original Web Midi package
* Maps devices to easy to remember functions
## Setup
Install the Midi Mapper package:
```
npm install webmidi-mapper
```
Import the Midi Mapper package somewhere in your code:
```
import {init as initWebmidi, onFaderChange, onButtonPress, onRotaryEncoderChange, onDrumPad, debugMidi, midiMaps} from 'webmidi-mapper';
```
## Usage
Start by initializing the Midi Mapper by running the init function (this needs to be executed first before running other functions)
```
initWebmidi("korg-nanokontrol2", (deviceReady) => {
console.log(deviceReady);
});
```
If your device isn't number 0 in the array than please adjust this like so:
```
initWebmidi("korg-nanokontrol2", (deviceReady) => {
console.log(deviceReady);
}, 1);
```
Now you can start by assigning faders, rotary encoders and buttons:
To assign a fader:
```
onFaderChange("1", (value) => {
console.log(value);
});
```
To assign a rotary encoder:
```
onRotaryEncoderChange("1", (value) => {
console.log(value);
});
```
To assign a button:
```
onButtonPress("play", () => {
console.log("Midi play button pressed!");
});
```
To assign a drumpad:
```
onDrumPad("1", () => {
console.log("Midi drumpad pressed!");
});
```
If you want the RAW midi value instead of the 0 to 1 value:
```
onFaderChange("1", (value) => {
console.log(value);
}, true);
onRotaryEncoderChange("1", (value) => {
console.log(value);
}, true);
```
If you want the button function to respond on both on and off value's:
```
onButtonPress("play", () => {
console.log("Midi play button pressed!");
}, true);
```
## Create your own mapping
To create a new map start by copying an existing map from the maps folder.
Then import and export your map in the maps.js.
To see on what note a button is use our debug function:
```
debugMidi((note, value, mapKey) => {
console.log('note', note);
console.log('value', value);
console.log('mapKey', mapKey);
});
```
Then press a button, turn a knob or turn up a fader and see the result.
## Maps
To see all the maps in the mapper:
```
console.log("Maps: ", midiMaps());
```
## Contribute
When your map is complete please create a pull request or open an issue with your map attached.
This so others can also start using that map.
## License
MIT