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

components/Piano

Interfaces​

KeyLabelProps​

Defined in: components/Piano/KeyLabel.tsx:8

Properties​

__label?​
optional __label?: (note, index) => ReactNode;

Defined in: components/Piano/KeyLabel.tsx:20

Internal

Parameters​
ParameterType
notenumber
indexnumber
Returns​

ReactNode

__note?​
optional __note?: number;

Defined in: components/Piano/KeyLabel.tsx:18

Internal

label?​
optional label?: (note, index) => ReactNode;

Defined in: components/Piano/KeyLabel.tsx:12

override Piano.label

Parameters​
ParameterType
notenumber
indexnumber
Returns​

ReactNode

wrapperClassName?​
optional wrapperClassName?: string;

Defined in: components/Piano/KeyLabel.tsx:14

wrapperStyle?​
optional wrapperStyle?: CSSProperties;

Defined in: components/Piano/KeyLabel.tsx:15

KeyMethods​

Defined in: components/Piano/key.tsx:36

Properties​

play​
play: (velocity?) => void;

Defined in: components/Piano/key.tsx:37

Parameters​
ParameterType
velocity?number
Returns​

void

played​
played: () => boolean;

Defined in: components/Piano/key.tsx:39

Returns​

boolean

stop​
stop: () => void;

Defined in: components/Piano/key.tsx:38

Returns​

void

KeyProps​

Defined in: components/Piano/key.tsx:14

Properties​

__width?​
optional __width?: number;

Defined in: components/Piano/key.tsx:33

Internal

activeBg?​
optional activeBg?: string;

Defined in: components/Piano/key.tsx:22

activeColor?​
optional activeColor?: string;

Defined in: components/Piano/key.tsx:23

bg?​
optional bg?: string;

Defined in: components/Piano/key.tsx:20

children?​
optional children?: ReactElement<unknown, string | JSXElementConstructor<any>>;

Defined in: components/Piano/key.tsx:30

<KeyLabel />

color?​
optional color?: string;

Defined in: components/Piano/key.tsx:21

height?​
optional height?: number | `${number}%`;

Defined in: components/Piano/key.tsx:18

noteNumber​
noteNumber: number;

Defined in: components/Piano/key.tsx:15

style?​
optional style?: CSSProperties;

Defined in: components/Piano/key.tsx:25

width?​
optional width?: number;

Defined in: components/Piano/key.tsx:17

PianoMethods​

Defined in: components/Piano/index.tsx:75

Properties​

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

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

Parameters​
ParameterType
notenumber
velocity?number
Returns​

void

stopNote​
stopNote: (note) => void;

Defined in: components/Piano/index.tsx:77

Parameters​
ParameterType
notenumber
Returns​

void

PianoProps​

Defined in: components/Piano/index.tsx:50

Properties​

blackNoteWidth?​
optional blackNoteWidth?: number;

Defined in: components/Piano/index.tsx:58

children?​
optional children?: 
  | ReactElement<unknown, string | JSXElementConstructor<any>>
  | ReactElement<unknown, string | JSXElementConstructor<any>>[];

Defined in: components/Piano/index.tsx:70

<WhiteKey /> | <BlackKey />

fill?​
optional fill?: boolean;

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

glissando?​
optional glissando?: boolean;

Defined in: components/Piano/index.tsx:53

height?​
optional height?: string | number;

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

keyboardShortcuts?​
optional keyboardShortcuts?: KeyboardShortcuts;

Defined in: components/Piano/index.tsx:55

label?​
optional label?: (note, index) => ReactNode;

Defined in: components/Piano/index.tsx:65

Parameters​
ParameterType
notenumber
indexnumber
Returns​

ReactNode

midiMax?​
optional midiMax?: number;

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

noteRange​
noteRange: NoteRange;

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

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

Defined in: components/Piano/index.tsx:62

Parameters​
ParameterType
notenumber
velocity?number
Returns​

void

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

Defined in: components/Piano/index.tsx:63

Parameters​
ParameterType
notenumber
Returns​

void

style?​
optional style?: CSSProperties;

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

whiteNoteWidth?​
optional whiteNoteWidth?: number;

Defined in: components/Piano/index.tsx:57

Type Aliases​

KeyboardShortcuts​

type KeyboardShortcuts = object;

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

Properties​

flags?​
optional flags?: object;

Defined in: components/Piano/keyboardShortcuts.ts:4

naturalOnly?​
optional naturalOnly?: boolean;
keys​
keys: string[];

Defined in: components/Piano/keyboardShortcuts.ts:2

Variables​

Piano​

const Piano: object;

Defined in: components/Piano/index.tsx:345

Customizable piano component.

Type Declaration​

BlackKey​
BlackKey: ForwardRefExoticComponent<KeyProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & RefAttributes<KeyMethods>>;
KeyLabel​
KeyLabel: (__namedParameters) => false | Element;
Parameters​
ParameterType
__namedParametersKeyLabelProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyLabelProps>
Returns​

false | Element

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

SHORTCUTS​

const SHORTCUTS: object;

Defined in: components/Piano/keyboardShortcuts.ts:9

Type Declaration​

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

Functions​

getNoteRangeArray()​

function getNoteRangeArray(noteRange): number[];

Defined in: components/Piano/index.tsx:43

[noteRange.first, noteRange.first + 1 ..., noteRange.last]

Parameters​

ParameterType
noteRangeNoteRange

Returns​

number[]