├── .gitignore ├── LICENSE ├── README.md ├── examples ├── basic-example.html └── whack-the-mole.html └── src └── launchpad.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .idea 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Bas Biesheuvel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # web-midi-launchpad 2 | A Web Midi Api implementation of the Novation Launchpad functionality. 3 | 4 | Currently supports only the old Launchpad MK1 (because that is the one I have). 5 | 6 | > ONLY WORKS in browsers that support the web-midi-api 7 | 8 | ### Initialization 9 | web-midi-launchpad uses (as the name suggests) the web midi api (https://webaudio.github.io/web-midi-api/). 10 | Therefore it is required to initialize this api first by requesting midi access. Once midi access has been 11 | granted, a launchpad instance can be created using the autoDetectLaunchpad function: 12 | 13 | ```javascript 14 | navigator.requestMIDIAccess().then(midiAccess => { 15 | const launchpad = autoDetectLaunchpad(midiAccess); //new Launchpad(inputPort.port, outputPort.port); 16 | launchpad.clear(); 17 | 18 | // Do your stuff with launchpad 19 | 20 | }, msg => { 21 | console.log("Failed to get MIDI access - " + msg); 22 | }); 23 | ``` 24 | 25 | It is also possible to specify a midi interface name to retrieve the inputs and outputs for 26 | that specific midi interface: 27 | 28 | ```javascript 29 | autoDetectLaunchpad(midiAccess, 'Launchpad S'); 30 | ``` 31 | 32 | A Launchpad instance can also be created manually, specifying both input and output ports. 33 | This can be useful if multiple launchpads are combined and the inputs of one need to work 34 | with the outputs of another.. 35 | 36 | ```javascript 37 | new Launchpad(midiInputPort, midiOutputPort); 38 | ``` 39 | 40 | It is recommended to clear the launchpad state upon connecting to it to reset any previous state. 41 | 42 | ```javascript 43 | launchpad.clear(); 44 | ``` 45 | 46 | ### Setting / Clearing LEDs 47 | It's pretty simple to enable/disable the LEDs of the pads. web-midi-launchpad comes with two 48 | additional interfaces to make this easy, Pad (containing X Y coordinates) and Color (containing 49 | the green/red led values). 50 | 51 | ```javascript 52 | const pad = new Pad(row, column); 53 | 54 | // Make the led full green 55 | launchpad.ledOn(pad, new Color(3, 0)); 56 | 57 | // Make the led full red 58 | launchpad.ledOn(pad, new Color(0, 3)); 59 | 60 | // Make the led full yellow 61 | launchpad.ledOn(pad, new Color(3, 3)); 62 | 63 | // Dim the LED to off status 64 | launchpad.ledOff(pad); 65 | ``` 66 | 67 | > Note that row can contain a value from 1 to 8, column can contain a value from 1 to 9 (9 being the 68 | round button located at the end of the row). 69 | 70 | > Colors (green/red) can contain values from 0 (off) to 3 (full on). 71 | 72 | ### Control pads 73 | The top row of buttons on the Launchpad are generally used for Automap or Live features. Those buttons 74 | are called control pads. They work in the same way as normal pads. 75 | 76 | ```javascript 77 | // Make the led full green 78 | launchpad.controlLedOn(1, new Color(3, 0)); 79 | 80 | // Make the led full red 81 | launchpad.controlLedOn(1, new Color(0, 3)); 82 | 83 | // Make the led full yellow 84 | launchpad.controlLedOn(1, new Color(3, 3)); 85 | 86 | // Dim the LED to off status 87 | launchpad.controlLedOff(1); 88 | ``` 89 | 90 | > The control led number can range from 1 to 8 91 | 92 | ### Led flashing 93 | It is possible to configure the Launchpad so that it can flash specific LEDs. To enable 94 | flashing: 95 | 96 | ```javascript 97 | launchpad.enableFlashing(); 98 | ``` 99 | 100 | Then use the Color interface to specify flashing behavior per LED: 101 | 102 | ```javascript 103 | launchpad.controlLedOn(1, new Color(3, 0, true)); // True means flashing 104 | ``` 105 | 106 | Flashing can also be disabled. 107 | 108 | ```javascript 109 | launchpad.disableFlashing(); 110 | ``` 111 | 112 | Example 1, flashing all leds using the flashing mechanism. 113 | 114 | ```javascript 115 | launchpad.enableFlashing(); 116 | for (let row = 1; row < 9; row++) { 117 | for (let column = 1; column < 10; column++) { 118 | launchpad.ledOn(new Pad(row, column), new Color(3, 0, true)); 119 | } 120 | } 121 | ``` 122 | 123 | Example 2, flashing all leds manually. 124 | 125 | ```javascript 126 | const flashSpeed = 250; 127 | setInterval(() => { 128 | for (let row = 1; row < 9; row++) { 129 | for (let column = 1; column < 10; column++) { 130 | launchpad.ledOn(new Pad(row, column), new Color(3, 0, true)); 131 | } 132 | } 133 | setTimeout(() => { 134 | for (let row = 1; row < 9; row++) { 135 | for (let column = 1; column < 10; column++) { 136 | launchpad.ledOff(new Pad(row, column), new Color(3, 0, true)); 137 | } 138 | } 139 | }, flashSpeed / 2) 140 | }, flashSpeed); 141 | ``` 142 | 143 | ### Setting mapping mode 144 | It is possible to configure the Launchpad in one of two possible mapping modes. Drum mapping 145 | is experimental and Pad positions change so the Pad interface might not work as expected. 146 | 147 | ```javascript 148 | launchpad.setDrumMappingMode(); 149 | ``` 150 | 151 | Default is the XY mapping mode. 152 | 153 | ```javascript 154 | launchpad.setXYMappingMode(); 155 | ``` 156 | 157 | ### Handling pad presses 158 | The pads on the Launchpad can send events when either a pad is pressed or released, it is 159 | pretty easy to listen to those events. 160 | 161 | ```javascript 162 | launchpad.onPadPress(pad => console.log('Pad pressed', pad)); 163 | 164 | launchpad.onPadRelease(pad => console.log('Pad released', pad)); 165 | 166 | launchpad.onControlPadPress(pad => console.log('Control pad pressed', pad)); 167 | 168 | launchpad.onControlPadRelease(pad => console.log('Control pad released', pad)); 169 | 170 | ``` 171 | -------------------------------------------------------------------------------- /examples/basic-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Basic Launchpad example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /examples/whack-the-mole.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Whack the mole - Launchpad edition 5 | 6 | 7 | 18 | 19 | 20 | 21 |

Whack the mole

22 |

Refresh the page with your launchpad attached and play a game of whack the mole. Check the console.log for your score.

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 |
106 | 107 | 108 | 109 | 110 | 250 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /src/launchpad.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Representation of a single launchpad pad, containing X Y coordinates. 3 | */ 4 | class Pad { 5 | constructor(row, column) { 6 | if (row < 1) { 7 | row = 1; 8 | } 9 | 10 | if (row > 8) { 11 | row = 8; 12 | } 13 | 14 | if (column < 1) { 15 | column = 1; 16 | } 17 | 18 | if (column > 9) { 19 | column = 9; 20 | } 21 | 22 | this.row = row; 23 | this.column = column; 24 | } 25 | 26 | equals(otherPad) { 27 | return this.row === otherPad.row && this.column === otherPad.column; 28 | } 29 | } 30 | 31 | /** 32 | * Representation of a pad color, contains green and red values. 33 | */ 34 | class Color { 35 | constructor(green, red, flashing = false) { 36 | if (green < 0) { 37 | green = 0; 38 | } 39 | 40 | if (green > 3) { 41 | green = 3; 42 | } 43 | 44 | if (red < 0) { 45 | red = 0; 46 | } 47 | 48 | if (red > 3) { 49 | red = 3; 50 | } 51 | 52 | this.green = green; 53 | this.red = red; 54 | this.flashing = flashing; 55 | } 56 | 57 | equals(otherColor) { 58 | return this.green === otherColor.green && this.red === otherColor.red; 59 | } 60 | } 61 | 62 | /** 63 | * The main launchpad interface. 64 | */ 65 | class Launchpad { 66 | constructor(inputPort, outputPort) { 67 | this.inputPort = inputPort; 68 | this.outputPort = outputPort; 69 | 70 | this.inputPort.onmidimessage = this.handleMidiMessage.bind(this); 71 | 72 | this.listeners = { 73 | onPadPress: [], 74 | onPadRelease: [], 75 | onControlPadPress: [], 76 | onControlPadRelease: [] 77 | }; 78 | } 79 | 80 | colorToVelocity(color) { 81 | // TODO: double buffering 82 | return (color.flashing ? 8 : 12) | (color.green << 4) | color.red; 83 | } 84 | 85 | // -- SENDING -- 86 | 87 | send(bytes) { 88 | this.outputPort.send(bytes); 89 | } 90 | 91 | ledOn(pad, color) { 92 | const row = pad.row, 93 | column = pad.column; 94 | 95 | const noteNumber = (row - 1) * 0x10 + (column - 1); 96 | 97 | this.send([0x90, noteNumber, this.colorToVelocity(color)]); 98 | } 99 | 100 | ledOff(pad) { 101 | const row = pad.row, 102 | column = pad.column; 103 | 104 | const noteNumber = (row - 1) * 0x10 + (column - 1); 105 | this.send([0x80, noteNumber, 0x00]); 106 | } 107 | 108 | controlLedOn(column, color) { 109 | if (column < 1) { 110 | column = 1; 111 | } 112 | 113 | if (column > 8) { 114 | column = 8; 115 | } 116 | 117 | const ccNumber = 0x67 + column; 118 | 119 | this.send([0xb0, ccNumber, this.colorToVelocity(color)]); 120 | } 121 | 122 | controlLedOff(column) { 123 | if (column < 1) { 124 | column = 1; 125 | } 126 | 127 | if (column > 8) { 128 | column = 8; 129 | } 130 | 131 | const ccNumber = 0x67 + column; 132 | this.send([0xb0, ccNumber, 0x00]); 133 | } 134 | 135 | clear() { 136 | this.send([0xb0, 0x00, 0x00]); 137 | } 138 | 139 | setXYMappingMode() { 140 | this.send([0xb0, 0x00, 0x01]); 141 | } 142 | 143 | setDrumMappingMode() { 144 | this.send([0xb0, 0x00, 0x02]); 145 | } 146 | 147 | enableFlashing() { 148 | const flash = 0x08; 149 | const doubleBufferConfig = 0x20 | flash; 150 | this.send([0xb0, 0x00, doubleBufferConfig]); 151 | } 152 | 153 | disableFlashing() { 154 | const flash = 0x00; 155 | const doubleBufferConfig = 0x20 | flash; 156 | this.send([0xb0, 0x00, doubleBufferConfig]); 157 | } 158 | 159 | // -- RECEIVING -- 160 | 161 | handleMidiMessage(event) { 162 | if (event.data.length !== 3) { 163 | console.log('Unknown message received.', event.data); 164 | } 165 | else if (event.data[0] === 0xb0 && event.data[2] === 0x7f) { 166 | // Control Pad press 167 | this.listeners.onControlPadPress.forEach(callback => callback(event.data[1] - 0x67)); 168 | } 169 | else if (event.data[0] === 0xb0 && event.data[2] === 0x0) { 170 | // Control Pad release 171 | this.listeners.onControlPadRelease.forEach(callback => callback(event.data[1] - 0x67)); 172 | } 173 | else if (event.data[0] === 0x90 && event.data[2] === 0x7f) { 174 | // Pad press 175 | const row = Math.floor(event.data[1] / 0x10) + 1; 176 | const column = event.data[1] % 0x10 + 1; 177 | this.listeners.onPadPress.forEach(callback => callback(new Pad(row, column))); 178 | } 179 | else if (event.data[0] === 0x90 && event.data[2] === 0x0) { 180 | // Pad release 181 | const row = Math.floor(event.data[1] / 0x10) + 1; 182 | const column = event.data[1] % 0x10 + 1; 183 | this.listeners.onPadRelease.forEach(callback => callback(new Pad(row, column))); 184 | } 185 | } 186 | 187 | onPadPress(callback) { 188 | this.listeners.onPadPress.push(callback); 189 | } 190 | 191 | onPadRelease(callback) { 192 | this.listeners.onPadRelease.push(callback); 193 | } 194 | 195 | onControlPadPress(callback) { 196 | this.listeners.onControlPadPress.push(callback); 197 | } 198 | 199 | onControlPadRelease(callback) { 200 | this.listeners.onControlPadRelease.push(callback); 201 | } 202 | }; 203 | 204 | const autoDetectLaunchpad = (midiAccess, name = 'launchpad') => { 205 | let launchpadInput = null, 206 | launchpadOutput = null; 207 | 208 | for (let entry of midiAccess.inputs) { 209 | const input = entry[1]; 210 | 211 | if (input.name.toLowerCase().indexOf(name.toLowerCase()) > -1) { 212 | launchpadInput = input; 213 | } 214 | } 215 | 216 | for (let entry of midiAccess.outputs) { 217 | const output = entry[1]; 218 | 219 | if (output.name.toLowerCase().indexOf(name.toLowerCase()) > -1) { 220 | launchpadOutput = output; 221 | } 222 | } 223 | 224 | if (launchpadInput !== null && launchpadOutput !== null) { 225 | return new Launchpad(launchpadInput, launchpadOutput); 226 | } 227 | }; 228 | --------------------------------------------------------------------------------