openmusic-piano-keyboard
v1.0.0
Published
a piano keyboard component to input notes with touch or mouse devices
Downloads
3
Maintainers
Readme
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.:
<link rel="stylesheet" href="Piano-Keyboard.css">
<script src="Piano-Keyboard.js" defer></script>
If using npm
You need to load the module and then register it--it is not automatically registered!
require('openmusic-piano-keyboard').register('openmusic-piano-keyboard');
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
<openmusic-piano-keyboard octaves="2"></openmusic-piano-keyboard>
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.addEventListener('noteon', function(e) {
console.log('note on on key index: ', e.detail.index);
});
noteoff
detail: index
containing the index of the released key (either by mouse or keyboard)
E.g.
keyboard.addEventListener('noteoff', function(e) {
console.log('note off on key index: ', e.detail.index);
});
Demo
Have a look at the demo file in index.html
for a usage example.