Sheet Viewer Music Block for React

Edit MEASURE_TEXT: each measure is a list of tokens, a pitch (a letter and an octave, such as E4) and a length (w, h, q or e for whole, half, quarter and eighth), and the measures must add up to four beats. The tune is written in C major at concert pitch; the viewer draws no accidentals, so keep it diatonic, or add an accidental field to Note and draw it beside the head.

Each entry in INSTRUMENTS has a clef, a number of letter steps to move every pitch, and a key signature in sharps. Because the tune is diatonic, a major second up is one letter step and two sharps, so a clarinet in B flat reads D major with every note one step higher, and the cello moves seven steps down and uses the bass clef. Add an instrument by adding a row.

Yes. The drawing is decoration with a title, and each page also has a list of its measures in words, such as "Measure 1: C4 quarter, E4 quarter", spelled for the instrument and its key signature. The staff region is named, can be scrolled with the keyboard on a phone, and always runs left to right, as music is read, even in a right-to-left page.

Nothing plays: no audio, no microphone. The page and the instrument you pick live in the component, and the status line says which. To play the part, map each note to a pitch in your own audio code and highlight the measure as it sounds.

The staff keeps a readable size and scrolls sideways inside its named region instead of shrinking, so the notes never get too small to read; the page foot stacks under the status line. The height of the panel does not change between pages or instruments.