JZZ.input.Kbd
Virtual MIDI keyboard. Supports mouse and touch screen. Fully customizeable. Ready for responsive design.
See the demo...
Usage
JZZ.input.Kbd(params);
// or
JZZ.input.Kbd(name, params);
// or
JZZ.input.Kbd.register(name, params);
JZZ().openMidiIn(name);
where params - is the object with the following possible keys:
-
at: the DOM element or the ID of the DOM element to host the keyboard;
if omitted, a new <DIV> element will be created in the end of the document.
-
from: the lowest key; default: 'C4'.
-
to: the highest key; default: 'E6'.
-
wl and ww: white key length and width in pixels; default: 150 and 42.
-
bl and bw: black key length and width in pixels; default: 100 and 24.
-
pos: position; 'N' (default) - musician is facing North; 'S' (upside-down) - musician is facing South;
'E' and 'W' (vertical) - musician is facing East and West.
-
rev: reverse; if true, thekeys are arranged in mirror otdrt.
-
keys: an array of [key, note] pairs,
where key is a DOM element (or its ID) to be a piano key,
and note is the corresponding note, as MIDI number or readable string name; must be one-to-one correspondence;
if keys is specified, all above parameters will be ignored.
(example)
-
chan: MIDI channel; default: 0.
-
active: if false, the keyboard will not respond to mouse and touch input.
-
onCreate: the function to run after the keyboard is created; it can be used for additional styling.
-
numeric values: responsive subparams; these will be used if the screen width is greater or equal to the key value.
(example)
Example
<script src='JZZ.js'></script>
<script src='JZZ.synth.Kbd.js'></script>
...
<script><!--
JZZ.synth.Kbd().connect(JZZ().openMidiOut());
--></script>
Styling
You can change the style and/or inner HTML on an individual key or a key range.
Normally, you would do this during initialization from the and(...) or onCreate(...) functions,
but it can be done from any other part of your application at any time.
Address the keys using the functions:
-
getKey(note) - address a single key, note is a MIDI value or a human-readable note name.
-
getKeys(note1, note2) - address a range of keys between note1 and note2.
-
getKeys() - address all keys.
-
getBlackKeys(note1, note2) - address a range of black keys between the specified noted.
-
getBlackKeys() - address all black keys.
-
getWhiteKeys(note1, note2) - address a range of white keys.
-
getWhiteKeys() - address all white keys.
Style and customize the keys using the functions:
-
setInnerHTML(string) - this one must be obvious...
-
setStyle(style1, style2) - apply style1 when the key is released, and style2 when the key is pressed.
-
setStyle(style) - apply style to the key in both pressed and released state.
Example
// paint it green!
JZZ.synth.Kbd().and(function(){
this.getKeys().setStyle({ borderColor:'#080' });
this.getBlackKeys().setStyle({ backgroundColor:'#0f0' }, { backgroundColor:'#8f8' });
}).connect(...);
Connection
JZZ.input.Kbd supports both input and output connectibility,
and can be inserted in the middle of the MIDI chain,
for example, to visualize the passing signal:
[MIDI input] => [JZZ.input.Kbd] => [MIDI synth]
See also
