Keyboard controls for Plink <http://dinahmoelabs.com/_plink/>.

plink.js

/* 
 * Play notes like it's a piano (see below).
 * Switch instruments with [1] to [8].
 *
 *   [s] [d]     [g] [h] [j]     [l] [;]
 * [z] [x] [c] [v] [b] [n] [m] [,] [.] [/]
 */

const noteMap =
  'zsxdcvgbhnjm,l.;/'.split('')
    .map((e, i) => [e, i - 1])
    .reduce((a, [e, i]) => {
      a[e] = i;
      return a;
    }, {});

const swatchMap =
  '12345678'.split('')
    .map((e, i) => [e, 'abcdefgh'[i]])
    .reduce((a, [e, i]) => {
      a[e] = i;
      return a;
    }, {});

class NoteEvent extends Event {
  constructor(key) {
    super('mousedown');
    this.pageY = this.getNote(key);
  }

  getNote(key) {
    const lineHeight = (window.innerHeight - 100) / 16;
    return -1 * Math.floor(lineHeight * (noteMap[key] - 15));
  }
}

class SwatchEvent extends Event {
  constructor() {
    super('mousedown');
  }
}

window.addEventListener("keydown", e => {
  const key = e.key;

  if (key in noteMap) {
    return document
      .getElementById("music")
      .dispatchEvent(new NoteEvent(key));
  }

  if (key in swatchMap) {
    return document
      .getElementById(swatchMap[key])
      .dispatchEvent(new SwatchEvent);
  }
});

window.addEventListener("keyup", () =>
  window.dispatchEvent(new Event("mouseup")));