Controlling Leds on an AKAI APC mini through WebMidi

akai_apc_mini_leds_webmidi.js

// Check this image, with all the buttons etc.
// https://s3.amazonaws.com/ext.agencewebdiffusion.com/Daniel/APCmini-vMix.PNG

// these are the available colors
var OFF = 0;
var GREEN = 1;
var GREEN_BLINK = 2;
var RED = 3;
var RED_BLINK = 4;
var YELLOW = 5;
var YELLOW_BLINK = 6;

// needed for the program
var midi, input, output

// this is the main keypad
var midimap = [
	[ 56, 57, 58, 59, 60, 61, 62, 63 ],
	[ 48, 49, 50, 51, 52, 53, 54, 55 ],
	[ 40, 41, 42, 43, 44, 45, 46, 47 ],
	[ 32, 33, 34, 35, 36, 37, 38, 39 ],
	[ 24, 25, 26, 27, 28, 29, 30, 31 ],
	[ 16, 17, 18, 19, 20, 21, 22, 23 ],
	[  8,  9, 10, 11, 12, 13, 14, 15 ],
	[  0,  1,  2,  3,  4,  5,  6,  7 ]
]

// these are the rest of the buttons
var rest = [ 64, 65, 66, 67, 68, 69, 70, 71, 82, 83, 84, 85, 86, 87, 88, 89 ]

// request MIDI access
if (navigator.requestMIDIAccess) {
	navigator.requestMIDIAccess()
		.then(success, failure);
}

// we have success!
function success (_midi) {
	midi = _midi
	var inputs = midi.inputs.values();
	var outputs = midi.outputs.values();

	// inputs is an Iterator
	for (i = inputs.next(); i && !i.done; i = inputs.next()) {
		// assign the device to the input var
		input = i.value;

		// each time there is a midi message call the onMIDIMessage function
		input.onmidimessage = onMIDIMessage;
	}

	for (o = outputs.next(); o && !o.done; o = outputs.next()) {
		// assign the device to the output var
		output = o.value;

		// make the thing blink red, so we know all your akai mpc are belong to us
		// also, take note that sending seperate messages will crash the controller
		// so I'm gathering all the commands in an array and sent that once
		var commands = []
		midimap.forEach( function( row, i ) {
			row.forEach( function( value, j ) {
				commands.push( 0x90, value, RED_BLINK )
			});
		});

		// switch the rest off, if there is still some led on
		rest.forEach( function( r, i ) {
			commands.push( 0x90, r, OFF )
		});
		output.send( commands );
	}
}

// everything went wrong.
function failure () {
	console.error('No access to your midi devices.');
}

// some examples, this is the 'onpress' (and on slider) function
function onMIDIMessage(e) {
	if (e.data[1] == 64) {
		// switch everything off
		var commands = []
		midimap.forEach( function( row, i ) {
			row.forEach( function( value, j ) {
				commands.push(0x90, value, OFF)
			})
		})

		rest.forEach( function( r, i ) {
			commands.push( 0x90, r, OFF )
		})
		output.send(commands)
	}else if (e.data[1] == 65) {
		// switch the main pads yellow
		var commands = []
		midimap.forEach( function( row, i ) {
			row.forEach( function( value, j ) {
				commands.push( 0x90, value, YELLOW )
			})
		})
    output.send( commands )
	}else{
		// press a button, make it green
		output.send( [ 0x90, e.data[1], GREEN ] );
	}
}

By dope demand;

  var text = [
    [ 1, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0 ],
    [ 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0 ],
    [ 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 0 ],
    [ 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0 ],
    [ 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0 ],
    [ 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0 ],
    [ 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0 ],
    [ 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0 ]
  ]

  var c = 0
  function runText() {
    var message = []
    for ( var y = 0; y < text.length; y++ ) {
      for ( var x = 0; x < text[y].length; x++ ) {
          if ( y < midimap.length ) {
            if (x < midimap[y].length ) {
                if ( text[y][x] == 1 ) {
                  message.push( 0x90, midimap[y][x], RED );
                }else{
                  message.push( 0x90, midimap[y][x], OFF );
                }
            }
          }
      }
    }

;)

Super useful. Thank for sharing this gist.