openmusic-piano-keyboard
A piano keyboard component
** YOU NEED SUPPORT FOR WEB COMPONENTS IN YOUR BROWSER BECAUSE WE'RE NOT SHIMMING ANYTHING IN **
Firefox: go to about:config
, find dom.webcomponents.enabled
and set it to true.
Chrome: maybe nothing to do?
Installation
Grab Piano-Keyboard.js
and Piano-Keyboard.css
from the repo or do npm install openmusic-piano-keyboard
.
Usage
If not using any package manager
Include Piano-Keyboard.js
and Piano-Keyboard.css
before you use the component. It will be registered automatically as openmusic-piano-keyboard
so you can run document.createElement('openmusic-piano-keyboard')
or have <openmusic-piano-keyboard>
elements in your HTML source.
E.g.:
If using npm
You need to load the module and then register it--it is not automatically registered!
;
But you could even register it with other name. Up to you.
Remember to load the css file too or the component will be unstyled.
API
Attributes
octaves
Attribute for selecting how many octaves to render. Can be 1 or 2.
Events
Events are DOM events, additional data is in the detail
field of each event.
noteon
detail: index
containing the index of the pressed key (either by mouse or keyboard)
E.g.
keyboard;
noteoff
detail: index
containing the index of the released key (either by mouse or keyboard)
E.g.
keyboard;
Demo
Have a look at the demo file in index.html
for a usage example.