piano is jQuery plugin that creates a piano keyboard widget.
This is a static snapshot image. For a working demonstration please go to the demonstration page.
Please go to the demonstration page at: http://www.l90r.com/sandbox/piano/doc/example.html
- configurable key range, dimensions, proportions and colors
- support for experimental keyboard layouts aimed at research and education
- possible external sound generators are decoupled via jQuery’s event mechanism
- support for an external sustain pedal
- black key displacement according to real-world keyboards
Note: this plugin does not play any sound. Use custom pianoup and pianodown event handlers to engage your own sound generators.
- Minimum requirements: jQuery 1.5, jQuery UI widgets 1.8.9
- Maximum tested requirements: jQuery 1.5, jQuery UI 1.8.9
Tested on Google Chrome 9.0-11.0, Mozilla Firefox 3.6.13, Internet Explorer 6-8
Specifies the general keyboard layout. Valid values are:
- “piano” – common piano layout, including horizontal black key displacements
- “simple” – piano layout without black key displacements. Black keys are centered between white keys
- “alternating” – alternating white and black (for experimental purposes)
- “plain” – all white keys, no black keys
whiteWidth, whiteHeight, blackWidth, blackHeight (default values 18, 100, 9, 60 respectively)
Black and white keys’ dimensions measured in pixels.
start, keys (default 9 and 88 respectively)
Key range. The default values define the common range of a concert piano. A “start” value of 0 corresponds to a C. “keys” specifies the number of keys to be displayed.
borderColor, blackColor, blackColorSelected, whiteColor, whiteColorSelected
Color scheme. The values shall have the format of the corresponding CSS properties, e.g. “#000” or “rgb(0,0,0)”
Initial state of the sustain pedal. true: pressed, false: released.
Triggered when a key is pressed (pianodown) or released (pianoup). The key number is passed as an additional parameter to the event handler callback.
Sets the sustain pedal state. The state (true: pressed, false: released) is passed as the first parameter.