An interactive SVG piano keyboard plugin written in pure JavaScript with no dependencies
This library/plugin provides a stylable piano keyboard using SVG and CSS. The library can function both as an input and output. The goal is to be very lightweight so that it contains a small footprint and remains modifiable.
Currently, there are three examples that demonstrates the library's functionality:
- an example showing how to connect key presses to callbacks
- an example showing how to use svgintpiano as a display
- an example showing how to style the piano with SVG
Currently, you can download the files in the dist directory and include the js file and, optionally, the CSS file.
To initialize an SVGIntPiano object:
const params = {
\\ setup parameters go here
};
const piano = new SVGIntPiano("cont", params);
Where "cont" is the id of an element defined similarly to:
<body>
<div id="cont"></div>
</body>
The library creates an SVG within the element whose id is passed as the first argument.
This library contains a number of parameters that enable some custimization of functionality.
lowNote
(int) The lowest note that the keyboard displays
highNote
(int) The highest note that the keyboard displays
width
height
(int) The dimensions of the SVG in pixels
margin
(int) The margin around the sides of the SVG in pixels
interactive
(bool) Enables or disables touch interactivity
whiteKeySpacing
(int) The spacing of the white keys in pixels
blackKeyVScale
(float) How large the black keys are in relationship to the white keys in the vertical dimension
blackKeyHScale
(float) How large the black keys are in relationship to the white keys in the horizontal dimension
cssClassPrefix
(string) Default is svgkey. This defines the prefix of the classes used to style the keyboard plugin.
The plugin/library responds to the following functions:
set(state, key)
- (boolean) state: the desired state
- (int) key: the midi number responding to the key
Sets the key to the value of state. This sets the css value of the key for display purposes.
clear()
Sets all keys to off.
subscribe(message, callback)
- (string) message: one of "keyon" and "keyoff"
- (function) callback: a function that takes as its first argument the midi number of the key pressed or released
Returns: (string) id : the id that is used to unsubscribe from a callback
Use this to assign functions that take place when keys are pressed and released.
unsubscribe(message, key)
- (string) message: one of "keyon" and "keyoff"
- (string) key: string returned from
subscribe()
Use this to unsubscribe from an event.
The appearance of the keyboard is specified through CSS. Declaration that can be used for SVG work for the keys of this piano plugin.
The following class names are of the form svgkey_(specifier). This assumes that prop.cssClassPrefix mentioned above is not set. If it is, use what ever you set this to in the place of svgkey. For example, if you set cssClassPrefix to pianokey, your class names will be of the form pianokey_specifier.
.svgkey_off
The styling for white keys when they are not being depressed or when the set(false, midinumber) method is called.
.svgkey_on
The styling for white keys when they are being depressed or when the set(true, midinumber) method is called.
.svgkey_black_off
The styling for black keys when they are not being depressed or when the set(false, midinumber) method is called.
.svgkey_black_on
The styling for black keys when they are being depressed or when the set(true, midinumber) method is called.
Note as well, psuedo selectors such as hover are available to SVG rectangles.
I do not have a maintenance model right now for accepting issues and pull requests. If you send one, I will try my best to answer questions or accept the pull request if its appropriate.
Thanks!