npm install piano-keyboardVisualize piano in DOM. Demo.
``js
``
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();