Piano

bunnpmpnpmyarn
Copy
pnpm add @audio-ui/react

Copy
import { Piano } from "@audio-ui/react/piano";

Anatomy

Import the primitive and assemble its parts.

Copy
import { Piano } from "@audio-ui/react";

<Piano.Root>
  <Piano.Keys>
    {(pitch) => (
      <Piano.Key pitch={pitch}>
        <Piano.KeyLabel />
      </Piano.Key>
    )}
  </Piano.Keys>
</Piano.Root>

API reference

Root

A keyboard to play: every key sounds while pressed, by pointer or from the keyboard. Dragging across the keys glides from one to the next, and each pointer holds its own key, so chords can be played on a touch screen. It is laid out like a piano, or with layout="even" as one equal share per key, the way a piano roll's rows are; orientation="vertical" puts the low end at the bottom. The keys are one tab stop, walked with the arrow keys. Renders a <div> element.

Keys

Renders children once per key, lowest first: the place to put a Piano.Key for each pitch. Renders no element of its own.

Key

One key, placed along the keyboard for its pitch. It sounds while pressed: by pointer through the keyboard, or with Enter or Space while focused. Its accessible name defaults to the pitch, such as "C4". Renders a <button> element.

KeyLabel

The name of the key it sits in, such as "C4". Hidden from assistive technology, which reads the key's own name. Renders a <span> element.

Styled

The registry's styled Piano, its usage and interaction: Piano.