Launchpad WebMIDI
Interacting with a Novation Launchpad from your browser with the web MIDI API.
This library is based on launchpad-mini library for Node. Node modules have been replaced with ES modules, Node midi replaced with Web MIDI API, and the connection workflow has been adapted, but most of the original library API works as usual. You can use launchpad-mini doc as a guide until the doc here will be completed.
Installation
-
Install via
bower:bower install --save LostInBrittany/launchpad-webmidi
-
Install via
yarn:yarn add https://github.com/LostInBrittany/launchpad-webmidi.git
-
Install via
npm:npm install --save git+https://git@github.com/LostInBrittany/launchpad-webmidi.git
Usage
Currenly we use rollup to generate several versions of launchpad-webmidi:
- A self-executing function, suitable for inclusion as a
<script>tag - An ES module file
- An UMD file
You can use the version you prefer in your app, we suggest using the ES module if your build tool understand it.
Example using ES Modules
<script type="module">
import Launchpad from '../dist/launchpad-webmidi.es.js';
let pad = new Launchpad();
pad.connect().then(() => { // Auto-detect Launchpad
console.log('Launchpad connected')
pad.reset(2); // Make Launchpad glow yellow
pad.on('key', k => {
console.log(`Key ${k.x},${k.y} down: ${k.pressed}`, k);
// Make button red while pressed, green after pressing
pad.col(k.pressed ? pad.red : pad.green, k);
});
});
</script>You can see the full example in examples/basic-with-esm.html and a slightly more complex one on examples/switch-color-with-esm.html.
Example using UMD
<script src='../dist/launchpad-webmidi.umd.js'></script>
<script>
let pad = new Launchpad();
pad.connect().then(() => { // Auto-detect Launchpad
console.log('Launchpad connected')
pad.reset(2); // Make Launchpad glow yellow
pad.on('key', k => {
console.log(`Key ${k.x},${k.y} down: ${k.pressed}`, k);
// Make button red while pressed, green after pressing
pad.col(k.pressed ? pad.red : pad.green, k);
});
});
</script>You can see the full example in examples/basic-with-umd.html and a slightly more complex one on examples/switch-color-with-umd.html.