Pitch

import { Pitch } from '@musedlab/symbols/pitch';

Basic Use

In its simplest use, the Pitch component can be used to wrap the name of a pitch and replace pseudo accidental symbols ("#" and "b") with the correct musical symbols. It supports upper and lower-case pitch letters, accidentals from triple flat to triple sharp, and an optional octave number. If you try some other text, it will throw an error.

A few examples:

• <Pitch>d6</Pitch> → D6
• <Pitch>C#</Pitch> → C
• <Pitch>Gb4</Pitch> → G4
• <Pitch>bbb6</Pitch> → B6
• <Pitch>D###</Pitch> → D

Use With Numeric Pitches

• <Pitch midi={7} /> → G0
• <Pitch midi={7} pitchClass /> → G

Enharmonics

Non-natural notes are written using sharps by default, but you can use the optional enharmonic prop to specify which spelling of the note name to use:

• <Pitch midi={66} /> → F5
• <Pitch midi={66} enharmonic="sharp" /> →F5
• <Pitch midi={66} enharmonic="flat" /> →G5

Ambiguous Enharmonics

You can also set enharmonic="both" to render both enharmonics

Scales

Another way to control spelling is to pass an array of pitches to the scale prop. For example, if you've defined the following scale:

// Lydian Dominant in C

const lydianDom = ['C', 'D', 'E', 'F#', 'G', 'A', 'Bb'];

<Pitch midi={66} scale={lydianDom} /> will render "F5", while <Pitch midi={70} scale={lydianDom} /> will render "B5"