@miadi/songbird-ui

React surface for a Songbird take, from @miadi/songbird.

| Export | What it is | |---|---| | PianoRoll | The roll of a sung take: a row per pitch sung, a block per note (green in tune, amber off by more than 15 cents, its cents in the tooltip), ghosts where alignment moved a note, beat lines when a grid applied, and an optional playhead. | | SongbirdTakeCard | The whole take: its files and key, notes and length, the roll, ▶ Play take (triangle tones) and 🔊 Voice, where the take stands, the singer's written note, and the host's actions. | | clockOf, placementOf | 75.4 → 1:15; the sentence saying where a take stands. |

import { SongbirdTakeCard } from "@miadi/songbird-ui"

if (!take) return null            // nothing was recorded

<SongbirdTakeCard
  take={take}                     // runTakeChain's answer
  bpm={92}
  aligned
  noteField
  voiceUrl={`/api/recordings/${take.voice}`}
  actions={[
    { label: "Keep", kind: "keep", onClick: ({ note }) => attachTake(take, slug, title, note) },
    { label: "Sing again", kind: "retake", onClick: retake },
  ]}
/>

Audio is created only when a person presses play, and closed when the card unmounts. Pressing a note auditions it. createAudioContext replaces Web Audio for a host or a test.

Colours are CSS variables with fallbacks: --sbtc-edge, --sbtc-faint, --sbtc-good, --sbtc-off, --sbtc-ground, --sbtc-record. Class names start with sbtc-: a note block is sbtc-block (with sbtc-in-tune or sbtc-off-tune), and sbtc-note is the singer's note field.