Jazz-Soft.net
We make it sound!
Home » Documentation » JZZ.js » Modules » JZZ.input.Kbd

JZZ.input.Kbd

Virtual MIDI keyboard. Supports mouse and touch screen. Fully customizeable. Ready for responsive design.

Virtual MIDI Piano

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:

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:

Style and customize the keys using the functions:

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