Piano keyboard rendered as SVG. This is not a complete app; it is meant to be used as a component in webapps.
See the demo application.
You can install PianoKeys as an npm package in your project:
npm i @jesperdj/pianokeys
Create a HTML div element in your HTML or using JavaScript that will hold the keyboard.
<div id="container"></div>Then in your script, create an instance of PianoKeys.Keyboard, passing it the container element.
import PianoKeys from '@jesperdj/pianokeys';
const container = document.getElementById('container');
const keyboard = new PianoKeys.Keyboard(container);This will render a keyboard corresponding to a regular 88-key piano, starting at the note A0 and ending at C8.
The constructor of PianoKeys.Keyboard takes an optional second parameter, which is an object with options. You can render a partial keyboard by setting the lowest and highest properties in the options object to set the lowest and highest note (key). These are specified as a note name with an octave number, for example 'A0', 'Bb4', 'D#6'.
Note: The keyboard always starts and ends with a white key. If you specify a note name that corresponds to a black key, the next lower or higher white key will be used.
Example:
const keyboard = new PianoKeys.Keyboard(container, {
lowest: 'C2',
highest: 'C5'
});You can set the following properties in the options object to specify custom colors:
keyStroke- stroke style for the outline of keyswhiteKeyFill- fill style for the white keysblackKeyFill- fill style for the black keys
Example:
const keybo
74E0
ard = new PianoKeys.Keyboard(container, {
lowest: 'C2',
highest: 'C5',
keyStroke: '#444',
whiteKeyFill: 'black',
blackKeyFill: 'white'
});To highlight keys, call fillKey() on the keyboard. Example:
keyboard.fillKey('C3');
keyboard.fillKey('Bb3');
keyboard.fillKey('Eb4');
keyboard.fillKey('G4');The fillKey() function optionally takes a second parameter to set the fill style to use for that key instead of the default highlight style.
keyboard.fillKey('C3', 'red');Call clearKey() to unhighlight a key.
keyboard.clearKey('C3');If you want to use a custom highlight fill style but you don't want to specify it in each call to fillKey(), then you can set the default highlight fill style by adding the following properties to the options that you pass to the constructor:
whiteKeyHighlightFill- default highlight fill style for white keysblackKeyHighlightFill- default highlight fill style for black keys
Example:
const keyboard = new PianoKeys.Keyboard(container, {
lowest: 'C2',
highest: 'C5',
keyStroke: '#444',
whiteKeyFill: 'black',
whiteKeyHighlightFill: 'yellow',
blackKeyFill: 'white',
blackKeyHighlightFill: 'orange'
});