メインコンテンツまでスキップ

components/Piano

Interfaces​

KeyState​

Defined in: react/src/components/Piano/index.tsx:49

What a key is, when PianoProps.label or keyProps is asked about it.

Properties​

active​
active: boolean;

Defined in: react/src/components/Piano/index.tsx:54

Whether the note is currently sounding.

disabled​
disabled: boolean;

Defined in: react/src/components/Piano/index.tsx:56

Whether the note is above PianoProps.midiMax and cannot sound.

index​
index: number;

Defined in: react/src/components/Piano/index.tsx:51

Position in the note range, counting from noteRange.first.

keyType​
keyType: "black" | "white";

Defined in: react/src/components/Piano/index.tsx:52

PianoMethods​

Defined in: react/src/components/Piano/index.tsx:138

Properties​

playNote​
playNote: (note, velocity?) => void;

Defined in: react/src/components/Piano/index.tsx:139

Parameters​
ParameterType
notenumber
velocity?number
Returns​

void

stopNote​
stopNote: (note) => void;

Defined in: react/src/components/Piano/index.tsx:140

Parameters​
ParameterType
notenumber
Returns​

void

PianoProps​

Defined in: react/src/components/Piano/index.tsx:59

Properties​

blackKeyHeightRatio?​
optional blackKeyHeightRatio?: number;

Defined in: react/src/components/Piano/index.tsx:102

Height of a black key, as a fraction of the height of the keyboard.

Default​
0.6
blackKeyWidthRatio?​
optional blackKeyWidthRatio?: number;

Defined in: react/src/components/Piano/index.tsx:97

Width of a black key, as a fraction of PianoProps.whiteKeyWidth.

Default​
0.65
fill?​
optional fill?: boolean;

Defined in: react/src/components/Piano/index.tsx:84

Fill the parent element, deriving the width of a white key from it. PianoProps.whiteKeyWidth is ignored.

Default​
false
glissando?​
optional glissando?: boolean;

Defined in: react/src/components/Piano/index.tsx:67

Let a pointer slide from one key to the next while it is down.

Default​
true
height?​
optional height?: string | number;

Defined in: react/src/components/Piano/index.tsx:108

Sets --height; the height the theme gives it stands when omitted, which follows fill through the data-fill attribute.

keyboardShortcuts?​
optional keyboardShortcuts?: KeyboardShortcuts;

Defined in: react/src/components/Piano/index.tsx:76

keyGap?​
optional keyGap?: number;

Defined in: react/src/components/Piano/index.tsx:92

Space between two white keys.

Default​
1
keyProps?​
optional keyProps?: (note, state) => KeyAttributes;

Defined in: react/src/components/Piano/index.tsx:132

Extra props for one key, by note: a class, a style, a data-* attribute to select on.

The geometry of the key (left, width, height) is applied after the returned style and cannot be overridden, so a key cannot be drawn somewhere other than where it responds.

Parameters​
ParameterType
notenumber
stateKeyState
Returns​

KeyAttributes

Example​

highlight the notes of a scale

keyProps={(note) => ({ 'data-in-scale': inScale(note, root, 'major') })}
label?​
optional label?: (note, state) => ReactNode;

Defined in: react/src/components/Piano/index.tsx:117

What to draw inside a key. '', null and undefined leave it bare, so a layout with gaps — SHORTCUTS.HOME_ROW_NATURAL, say — needs no special casing.

Parameters​
ParameterType
notenumber
stateKeyState
Returns​

ReactNode

midiMax?​
optional midiMax?: number;

Defined in: react/src/components/Piano/index.tsx:74

Highest note that can sound. Keys above it are drawn aria-disabled.

Default​
127
noteRange​
noteRange: NoteRange;

Defined in: react/src/components/Piano/index.tsx:60

onPlayNote?​
optional onPlayNote?: (note, velocity?) => void;

Defined in: react/src/components/Piano/index.tsx:134

Parameters​
ParameterType
notenumber
velocity?number
Returns​

void

onStopNote?​
optional onStopNote?: (note) => void;

Defined in: react/src/components/Piano/index.tsx:135

Parameters​
ParameterType
notenumber
Returns​

void

style?​
optional style?: CSSProperties & CSSVariables;

Defined in: react/src/components/Piano/index.tsx:110

whiteKeyWidth?​
optional whiteKeyWidth?: number;

Defined in: react/src/components/Piano/index.tsx:87

Default​
40

Type Aliases​

CSSVariables​

type CSSVariables = Record<`--${string}`, string | number | undefined>;

Defined in: react/src/components/Piano/index.tsx:35

style that also takes CSS custom properties, which is how a key's colours are set: see index.css for the ones each key type reads.

KeyAttributes​

type KeyAttributes = Omit<ComponentPropsWithoutRef<"div">, "style"> & object & Record<`data-${string}`, string | number | boolean | undefined>;

Defined in: react/src/components/Piano/index.tsx:44

What PianoProps.keyProps may return for one key.

data-* attributes are spelled out because TypeScript only allows them on JSX syntax, not on an object type, and selecting on one is the usual way to mark a key out.

Type Declaration​

style?​
optional style?: CSSProperties & CSSVariables;

KeyboardShortcuts​

type KeyboardShortcuts = object;

Defined in: react/src/components/Piano/keyboardShortcuts.ts:1

Properties​

keys​
keys: string[];

Defined in: react/src/components/Piano/keyboardShortcuts.ts:10

Keys laid out from noteRange.first, one entry per semitone.

An empty string leaves that note without a shortcut: KeyboardEvent.key is never empty, so the entry can never match. Use it to skip the black keys (see SHORTCUTS.HOME_ROW_NATURAL) and keep the remaining entries lined up with the notes.

Variables​

Piano​

const Piano: object;

Defined in: react/src/components/Piano/index.tsx:354

Customizable piano component.

Type Declaration​

Root​
Root: ForwardRefExoticComponent<PianoProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & RefAttributes<PianoMethods>>;

Root​

const Root: ForwardRefExoticComponent<PianoProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & RefAttributes<PianoMethods>>;

Defined in: react/src/components/Piano/index.tsx:146

SHORTCUTS​

const SHORTCUTS: object;

Defined in: react/src/components/Piano/keyboardShortcuts.ts:16

Ready-made keyboard layouts. Both assume noteRange.first is a C.

Type Declaration​

HOME_ROW​
HOME_ROW: object;

Every semitone from C, over the two rows of a QWERTY keyboard.

HOME_ROW.keys​
keys: string[];
HOME_ROW_NATURAL​
HOME_ROW_NATURAL: object;

The white keys only, on the home row. Black keys have no shortcut.

HOME_ROW_NATURAL.keys​
keys: string[];