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://[email protected]/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.

License

MIT License