svg-interactive-piano
Advanced tools
A dependency free piano display and interaction plugin for browsers using svg.
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:
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)
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)
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)
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!
FAQs
A dependency free piano display and interaction plugin for browsers using svg.
The npm package svg-interactive-piano receives a total of 0 weekly downloads. As such, svg-interactive-piano popularity was classified as not popular.
We found that svg-interactive-piano demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.