piano – a flexible piano keyboard plugin for jQuery

February 12, 2011

piano is jQuery plugin that creates a piano keyboard widget.

Snapshot image

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


Source code and development: https://github.com/l90r/piano
Direct download: jquery.l90r.piano.js


  • 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

Browser support:

Tested on Google Chrome 9.0-11.0, Mozilla Firefox 3.6.13, Internet Explorer 6-8


layout (default:”piano”)

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.


pianodown, pianoup

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.


  1. […] Source Demo […]

  2. December 18, 2011

    Hi, here is an example of what I did, what’s you opinion?


  3. October 3, 2012

    […] Source Demo […]

  4. January 2, 2013

    Pretty cool!
    I will make some changes to build a “Note Range” widget.
    Thanks Igor!

  5. January 28, 2013

    Very interesting, congratulations. I can not run the other layouts: simple, alternating and plain, It seems it does not work

  6. July 22, 2013


    Would be great methods to press key programmatically (eg: pressKey(idx), releaseKey(idx) )

Please, leave a comment here