### Piano Chart - Installation

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Instructions on how to install the piano-chart library using npm or yarn.

```APIDOC
## Installation

```bash
npm install piano-chart
```

or

```bash
yarn add piano-chart
```
```

--------------------------------

### Install piano-chart using npm or yarn

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Installs the piano-chart library using either the npm or yarn package managers. This is the first step before using the library in your project.

```bash
npm install piano-chart
```

```bash
yarn add piano-chart
```

--------------------------------

### Customizing piano chart with configuration in JavaScript

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Shows how to customize the piano-chart appearance and behavior by passing a configuration object to the Instrument constructor. This example sets a smaller octave range and highlights notes in the D Major scale.

```javascript
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" }],
  }
);
piano.create();

piano.keyDown("D4");
piano.keyDown("F#4");
piano.keyDown("A4");
```

--------------------------------

### Applying settings dynamically with JavaScript

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Illustrates how to change piano chart settings after initialization using the `applySettings()` method. Note that changes to octave ranges require recreating the Instrument instance.

```javascript
piano.applySettings({
  showNoteNames: "always",
  highlightColor: "#ff0000"
});
```

--------------------------------

### Piano Chart - Basic Usage

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Demonstrates the basic usage of the piano-chart library to create and display a piano keyboard with specified notes.

```APIDOC
## Usage: The basics

```javascript
import { Instrument } from "piano-chart";

const piano = new Instrument(document.getElementById('pianoContainer'));
piano.create();

piano.keyDown("D4");
piano.keyDown("F#4");
piano.keyDown("A4");
```

This will display a D Major chord in the 4th octave on the piano chart.
```

--------------------------------

### Piano Instrument Lifecycle Management (JavaScript)

Source: https://context7.com/ailon/piano-chart/llms.txt

Demonstrates how to initialize, destroy, and reload a piano instrument using the `piano-chart` library. It covers cleaning up resources with `destroy()` and recreating the instrument with `reload()` or by creating a new instance, typically after changing configuration like octave ranges.

```javascript
import { Instrument } from "piano-chart";

const container = document.getElementById("pianoContainer");
let piano = new Instrument(container, {
  startOctave: 2,
  endOctave: 6
});
piano.create();

// Later, clean up before removing from DOM
piano.destroy();

// To change octave range, create new instance
piano = new Instrument(container, {
  startOctave: 4,
  endOctave: 5
});
piano.create();

// Or use reload() to recreate with current settings
piano.reload();
```

--------------------------------

### Piano Chart - Configuration

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Shows how to configure the piano chart with various settings like octave range, highlighted notes, and key press styles.

```APIDOC
## Usage: Configuration

```javascript
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" }],
  }
);
piano.create();

piano.keyDown("D4");
piano.keyDown("F#4");
piano.keyDown("A4");
```

### 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;
- `keyPressStyle: KeyPressStyle` (default "subtle") (new in v.1.5) - the style of key press visualization. Values:
  - `subtle` - fills keys with a subtle gradient;
  - `vivid` - fills keys with a color specified via `vividKeyPressColor`. 
- `vividKeyPressColor: string` (default "#f33") (new in v.1.5) - key fill color for key presses when `keyPressStyle` is set to `vivid`.
```

--------------------------------

### Generate Musical Scales with ScaleHelper in JavaScript

Source: https://context7.com/ailon/piano-chart/llms.txt

Introduces the `ScaleHelper` utility for generating musical scales. It allows creating various scales (major, minor, pentatonic, modal) from a specified root note. The generated scale notes can be directly used to highlight keys on a `piano-chart` instrument.

```javascript
import { ScaleHelper, Instrument } from "piano-chart";

// Get D Major scale notes
const dMajorScale = ScaleHelper.getScale({ note: "D" }, "major");
console.log(dMajorScale.notes);
// Output: [{ note: "D" }, { note: "E" }, { note: "F", accidental: "#" }, ...]

// Get A Minor pentatonic scale
const aMinorPent = ScaleHelper.getScale({ note: "A" }, "minorpentatonic");

// Use scale with piano instrument
const piano = new Instrument(document.getElementById("pianoContainer"), {
  startOctave: 3,
  endOctave: 5,
  highlightedNotes: dMajorScale.notes.map(n =>
    `${n.note}${n.accidental || ""}`
  ),
  specialHighlightedNotes: [dMajorScale.root]
});
piano.create();

// Available modes:
// 'major', 'minor', 'dorian', 'phrygian', 'lydian', 'mixolydian',
// 'locrian', 'majorpentatonic', 'minorpentatonic', 'harmonicminor', 'melodicminor'
const modes = ['major', 'dorian', 'phrygian', 'lydian', 'mixolydian', 'minor', 'locrian'];
modes.forEach(mode => {
  const scale = ScaleHelper.getScale({ note: "C" }, mode);
  console.log(`${mode}: ${scale.notes.map(n => n.note + (n.accidental || "")).join(", ")}`);
});
```

--------------------------------

### Piano Chart - Methods

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Documentation for the available methods to interact with the piano chart instance.

```APIDOC
## Methods

- `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;
```

--------------------------------

### Programmatically Press and Release Keys with Piano Chart

Source: https://context7.com/ailon/piano-chart/llms.txt

Illustrates how to use the `keyDown()` and `keyUp()` methods of the `Instrument` class to simulate pressing and releasing piano keys. Notes can be specified using string notation (e.g., 'C4', 'F#5') or INoteValue objects.

```javascript
import { Instrument } from "piano-chart";

const piano = new Instrument(document.getElementById("pianoContainer"));
piano.create();

// Press keys using string notation
piano.keyDown("C4");      // Middle C
piano.keyDown("E4");      // E in 4th octave
piano.keyDown("G4");      // G in 4th octave - forms C Major chord

// Press keys with sharps and flats
piano.keyDown("F#4");     // F sharp
piano.keyDown("Bb3");     // B flat
piano.keyDown("C##4");    // C double sharp (enharmonic to D)

// Release keys
piano.keyUp("C4");
piano.keyUp("E4");
piano.keyUp("G4");

// Using INoteValue object notation
piano.keyDown({ note: "D", accidental: "#", octave: 4 });
piano.keyUp({ note: "D", accidental: "#", octave: 4 });
```

--------------------------------

### Rasterizing piano chart to PNG with JavaScript

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Demonstrates how to generate a PNG screenshot of the current piano keyboard state using the `rasterize()` method. The resulting data URL can be used as an image source, optionally with a signature.

```javascript
piano.rasterize(function(dataUrl) {
  // Use dataUrl as the src for an image element
}, "My Signature");
```

--------------------------------

### Create Piano Instrument with Piano Chart

Source: https://context7.com/ailon/piano-chart/llms.txt

Demonstrates how to create a basic and a customized piano instrument using the `Instrument` class from the piano-chart library. It requires an HTML container element and accepts configuration options for octave range and note display.

```javascript
import { Instrument } from "piano-chart";

// Create a basic piano with default settings (49 keys, C2 to C6)
const container = document.getElementById("pianoContainer");
const piano = new Instrument(container);
piano.create();

// Create a customized piano with specific octave range
const customPiano = new Instrument(document.getElementById("customContainer"), {
  startOctave: 3,
  startNote: "C",
  endOctave: 5,
  endNote: "C",
  showNoteNames: "always",
  showOctaveNumbers: true
});
customPiano.create();
```

--------------------------------

### Handle Piano Key Mouse Events with JavaScript

Source: https://context7.com/ailon/piano-chart/llms.txt

Explains how to integrate mouse event listeners for piano key interactions using `addKeyMouseDownListener` and `addKeyMouseUpListener`. The provided handlers receive note details and can trigger visual feedback via `keyDown` and `keyUp` methods. Listeners can be selectively removed.

```javascript
import { Instrument } from "piano-chart";

const piano = new Instrument(document.getElementById("pianoContainer"), {
  startOctave: 3,
  endOctave: 5
});
piano.create();

// Handler function receives INoteValue with note, accidental, and octave
const handleKeyPress = (noteValue) => {
  console.log(`Key pressed: ${noteValue.note}${noteValue.accidental || ""}${noteValue.octave}`);
  // Route back to keyDown for visual feedback
  piano.keyDown(noteValue);
};

const handleKeyRelease = (noteValue) => {
  console.log(`Key released: ${noteValue.note}${noteValue.accidental || ""}${noteValue.octave}`);
  piano.keyUp(noteValue);
};

// Add event listeners
piano.addKeyMouseDownListener(handleKeyPress);
piano.addKeyMouseUpListener(handleKeyRelease);

// Remove specific listener when no longer needed
piano.removeKeyMouseDownListener(handleKeyPress);

// Remove all listeners
piano.removeKeyMouseDownListener();
piano.removeKeyMouseUpListener();
```

--------------------------------

### Highlight Notes and Scales with Piano Chart

Source: https://context7.com/ailon/piano-chart/llms.txt

Shows how to use `highlightedNotes` and `specialHighlightedNotes` configuration options to visually mark specific notes on the piano keyboard. This is useful for displaying scales, chords, or root notes with distinct colors.

```javascript
import { Instrument } from "piano-chart";

// Create piano highlighting D Major scale with root note emphasized
const piano = new Instrument(document.getElementById("pianoContainer"), {
  startOctave: 3,
  endOctave: 5,
  highlightedNotes: ["D", "E", "F#", "G", "A", "B", "C#"],
  highlightColor: "#0c0",                    // Green highlight for scale notes
  specialHighlightedNotes: [{ note: "D" }],  // Red highlight for root
  specialHighlightColor: "#f00",
  showNoteNames: "onhighlight"               // Show labels only on highlighted keys
});
piano.create();

// Display the D Major chord
piano.keyDown("D4");
piano.keyDown("F#4");
piano.keyDown("A4");
```

--------------------------------

### Piano Chart - Events

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Information on how to handle mouse events for key presses on the piano chart.

```APIDOC
## Events

`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:

```typescript
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.
```

--------------------------------

### Basic piano chart usage in JavaScript

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Demonstrates the basic usage of the piano-chart library to display a D Major chord in the 4th octave. It involves creating an Instrument instance, rendering it, and then simulating key presses for the notes.

```javascript
import { Instrument } from "piano-chart";

const piano = new Instrument(document.getElementById('pianoContainer'));
piano.create();

piano.keyDown("D4");
piano.keyDown("F#4");
piano.keyDown("A4");
```

--------------------------------

### Configure Key Press Styles in Piano Chart

Source: https://context7.com/ailon/piano-chart/llms.txt

Explains how to customize the visual appearance of pressed keys using the `keyPressStyle` option. It supports 'subtle' (default gradient) and 'vivid' styles, with the latter allowing a custom `vividKeyPressColor`.

```javascript
import { Instrument } from "piano-chart";

// Create piano with vivid key press visualization
const piano = new Instrument(document.getElementById("pianoContainer"), {
  startOctave: 3,
  endOctave: 5,
  keyPressStyle: "vivid",
  vividKeyPressColor: "#ff6600"  // Orange fill for pressed keys
});
piano.create();

// Press some keys to see the vivid style
piano.keyDown("C4");
piano.keyDown("E4");
piano.keyDown("G4");

// Alternatively, use subtle gradient style (default)
const subtlePiano = new Instrument(document.getElementById("container2"), {
  startOctave: 4,
  endOctave: 5,
  keyPressStyle: "subtle"
});
subtlePiano.create();
```

--------------------------------

### Handling mouse events on piano keys in JavaScript

Source: https://github.com/ailon/piano-chart/blob/master/README.md

Explains how to add and remove event listeners for mouse down and mouse up events on piano keys. Handlers receive note information, and typically need to call `keyDown()` or `keyUp()` to visually represent the press.

```javascript
piano.addKeyMouseDownListener(function(noteInfo) {
  console.log("Key down:", noteInfo);
  piano.keyDown(noteInfo);
});

piano.addKeyMouseUpListener(function(noteInfo) {
  console.log("Key up:", noteInfo);
  piano.keyUp(noteInfo);
});

// To remove listeners:
// piano.removeKeyMouseDownListener(listenerFunction);
// piano.removeKeyMouseUpListener(listenerFunction);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.