jQuery.klavier examples

Initialize a simple piano with default values:

$("#example-1 .piano").klavier();

Initialize a simple piano with a range of 2 octaves (c⁴–c⁶ in terms of MIDI or c¹–c³ in traditional musical terms):

$("#example-2 .piano").klavier({ startKey: 60, endKey: 83 });

Initialize a piano and set/get the selected key values:

$("#example-3 .piano").klavier({ startKey: 60, endKey: 83 }).klavier("setSelectedValues", [60, 64, 67]);
var values = $("#example-3 .piano").klavier("getSelectedValues"); // values === [60, 64, 67]

Set different selection modes:   none   single   multiple (default)

$("#example-4 .piano").klavier({ startKey: 60, endKey: 83, selectionMode: "multiple" });

Use the 'onSelectedValuesChanged' callback to get informed about changes:

$("#example-5 .piano").klavier({
    startKey: 60,
    endKey: 83,
    onSelectedValuesChanged: function (values) {
        alert("[" + values + "]");
    }
});