Nth Permutation Mathematics

    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    piano-chart — JavaScript library to visualize musical notes on a piano keyboard

    The purpose of piano-chart is to allow developers to include visual representation of musical notes on a piano keyboard.


    npm install piano-chart


    yarn add piano-chart


    The basics

    All you need to do to display your notes on a piano chart is create the instrument by specifying a container to render into, and then tell it what notes to "press". Here's how you would show a D Major chord in 4th octave:

    import { Instrument } from "piano-chart";
    const piano = new Instrument(document.getElementById('pianoContainer'));

    And you should get this:

    D Major chord on a 49-key keyboard


    As you can see it's very easy to get a simple piano chart. But there are more things you can customize to your liking.

    This examples changes the keyboard to smaller one and also highlights the notes in D Major scale.

    import { Instrument } from "piano-chart";
    const piano = new Instrument(document.getElementById('pianoContainer'), {
        startOctave: 3,
        endOctave: 5,
        highlightedNotes: ["D", "E", "F#", "G", "A", "B", "C#"],
        specialHighlightedNotes: [{ note: "D" }],

    This is what you get as a result:

    D Major chord on a 49-key keyboard

    You pass configuration object as a second parameter to the Instrument constructor and you can also change most of them later by calling the applySettings() method.

    Available settings:

    • startOctave: number (default 2) - the first displayed octave;
    • startNote: Note (default "C") - the first displayed note in the first displayed octave;
    • endOctave: number (default 6) - the last displayed octave;
    • endNote: Note (default "C") - the last displayed note in the last displayed octave;
    • showNoteNames: NoteNameBehavior (default "onpress") - when to show note labels on the keys. Available values:
      • always - labels are always on;
      • onpress - labels are displayed when a key is pressed;
      • onhighlight - labels are displayed only on highlighted keys;
      • never - labels are never displayed.
    • highlightedNotes: NoteValue[(default []) - an array of notes to highlight (octave number can be omitted);
    • highlightColor: string (default "#0c0") - the base color for the highlight bubble;
    • specialHighlightedNotes: NoteValue[(default []) - an array of notes to highlight in a special way (eg. root notes)
    • specialHighlightColor: string (default "#f00") - the base color of the special highlight bubbles;
    • showOctaveNumbers: boolean (default false) - whether to show octave numbers on the keyboard or not.


    • create() - create and show an instrument chart;
    • keyDown(note: INoteValue | string) - press a key;
    • keyUp(note: INoteValue | string) - release a key;
    • applySettings(settings: IInstrumentSettings) - apply new settings (changes to start/end notes and octaves are not supported through this method - recreate the Instrument instead);
    • rasterize(done: (dataUrl: string) => void, signature?: string)) (new in v.1.4) - creates a PNG screenshot of the current keyboard and calls the specified callback with the data URL that can be used as the src of a HTML image. If signature string is provided, it will be added at the bottom right corner of the screenshot.
    • destroy() - perform cleanup;


    piano-chart can raise events when keys are clicked with a mouse. To handle these events you need to add listeners using addKeyMouseDownListener(), addKeyMouseUpListener() and remove them using removeKeyMouseDownListener() and removeKeyMouseUpListener() when no longer needed.

    All handlers receive an argument of INoteValue type:

    interface INoteValue {
      note: Note;
      accidental?: Accidetnal;
      octave?: number;

    Note that you need to route this note back to the keyDown()/keyUp() methods if you want for these clicks to result in visible key presses.


    piano-chart is distributed under the MIT License.

    Copyright by Alan Mendelevich.


    npm i piano-chart@1.4.0





    Unpacked Size

    601 kB

    Total Files


    Last publish


    • ailon