jquery.klavier

    1.1.1 • Public • Published

    jquery.klavier

    A jQuery plugin to render a piano keyboard.

    Build Status

    Getting Started

    Download the production version or the development version.

    In your web page:

    <div id='container'></div>
    <script src='jquery.min.js'></script>
    <script src='jquery.klavier.min.js'></script>
    <script>
    $(document).ready(function ($) {
      $('#container').klavier();
    });
    </script> 

    Copy the following styles into your web site's CSS:

    #container {
        height: 200px;
        width: 600px;
    }
    .klavier-key {
        border: 1px solid black;
    }
    .klavier-black-key {
        background-color:  black;
    }
    .klavier-white-key {
        background-color:  white;
    }
    .klavier-white-key.klavier-selected-key {
        background-color:  #CCCCCC;
    }
    .klavier-black-key.klavier-selected-key {
        background-color:  #333333;
    }

    Documentation

    API

    Instantiate a new keyboard by calling:

    $('#container').klavier();

    You can also specify options:

    $('#container').klavier({ startKey: 60, endKey: 83 });

    The following table lists all available options and their default values:

    option name default value description
    startKey 60 The MIDI value of the first key (must be a white key)
    endKey 71 The MIDI value of the last key (must be a white key)
    selectionMode 'multiple' Specifies how many keys can be selected at one time (can be 'none', 'single' or 'multiple')
    cssPrefix 'klavier' The first part of the generated CSS classes for the keys (can be used to style instances differently)
    zIndex 999 The z-index value of the white keys (black keys have zIndex + 1)
    onSelectedValuesChanged (not set) A function used as callback when the selection has changed

    You can set the selected keys providing an array of MIDI values:

    $('#container').klavier('setSelectedValues', [60, 61]);

    You can get the currently selected keys by calling:

    var selectedKeys = $('#container').klavier('getSelectedValues');

    You can finally destroy the keyboard by calling:

    var selectedKeys = $('#container').klavier('destroy');

    Please note, that all named calls to the $.klavier function are not chainable.

    Styling

    Every key gets assigned following CSS classes by the plugin: klavier-key, klavier-white-key (for white keys), klavier-black-key (for black keys), where the first part corresponds to the cssPrefix you provided as options (defaults to klavier).

    Please note that the jQuery.klavier plugin sets position: relative on the container element during initialization. However, you have to set an explicit width and height on the container or else the keyboard won't be visible. You also have to set at least some background colors and borders for the CSS classes klavier-black-key and klavier-white-key to distinguish the keys (see also the aforementioned examples).

    Examples

    Have a look at the file examples.html.

    Release History

    • 1.1.0 Support for CommonJS and AMD style module loading
    • 1.0 Initial release

    Copyright (c) 2014 Andreas Helmberger & Ulrich Kaiser Licensed under the MIT License (MIT)

    Install

    npm i jquery.klavier

    DownloadsWeekly Downloads

    14

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • ahelmberger