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.

Demonstration

Please go to the demonstration page at: http://www.l90r.com/sandbox/piano/doc/example.html

Download

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

Features:

  • 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.

Requirements:

  • 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

Parameters

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)”

sustain

Initial state of the sustain pedal. true: pressed, false: released.

Events

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.

Methods

sustain

Sets the sustain pedal state. The state (true: pressed, false: released) is passed as the first parameter.

Comments

  1. [...] Source Demo [...]

  2. December 18, 2011

    Hi, here is an example of what I did, what’s you opinion?
    http://www.untunedbits.com/piano-jquery-con-teclado

    cheers

  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

    Excellent!

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

Please, leave a comment here