Interactive demo

npm install --save react-etude-piano

import { Piano } from "react-etude-piano";

<Piano start="A1" end="C8" />;

type: string

The starting note of the piano.

type: string

The ending note of the piano.

type: (etude.theory.Pitch) => void

default: () => {}

The action to take when a key is pressed. More details at etude.js#pitch.

type: (etude.theory.Pitch) => void

default: () => {}

The action to take when a key is released. More details at etude.js#pitch.

type: boolean

default: false

Whether labels should be displayed for every key.

type: string[] | etude.theory.Pitch[]

default: []

The keys to highlight.

type: etude.theory.Policy

default: Policy.DEFAULT_PRIORITY

Advanced prop to determine which enharmonic equivalent pitch labels to use. More details at etude.js#policy.