Visualize piano in DOM. Demo.

var Keyboard = require('piano-keyboard');

//options
var keyboad = new Keyboard({
	element: document.querySelector('.my-piano'), //if omitted, element is created
	range: ['c4', 'c#6'], //notes range, numbers or names
	a11y: false //focusable & keyboard interactions
});

//events
keyboard
	.on('noteOn', function ({which, volume, target}) {})
	.on('noteOff', function ({which, volume, target}) {});

//API
keyboard.noteOn(['a4', 'c2', 'c3'], [127, 80, 80]);
keyboard.activeNotes; // Set <49, 16, 28>
keyboard.noteOff(['a4', 'c2']);

//pipe to midi
keyboard.pipe(require('web-midi')('Launchpad'));

//pipe from midi
var midiIn = require('midi-qwerty-keys')({
	mode: 'piano',
	offset: keyboard.range[0]
});
midiIn.pipe(keyboard);

//pipe to simple synthesizer WIP
keyboard.pipe(require('synthesizer'));

//change orientation to vertical
keyboard.element.classList.add('piano-keyboard-vertical');
keyboard.element.classList.remove('piano-keyboard-vertical');

//call on changing orientation, resize etc
keyboard.update();

Analogs

• qwerty-hancock