musical-components v0.1.24

musical-components    

React/MIDI library that renders and plays musical notation in all major browsers.

Install

$ npm install musical-components --save

Usage

Instantiate notes (as well as rests), specifying the duration and pitch.

import { Note, NotationType, Pitch } from 'musical-components'

...

const notes = [
    new Note(NotationType.Eighth, Pitch.A3),
    new Note(NotationType.Eighth, Pitch.B3),
    new Note(NotationType.Eighth, Pitch.C4)
]

Pass your note array into the Staff element's initialNotations prop within your React app, providing the clef, key signature, and time signature as additional props.

import { NotationType, Clef, Staff } from 'musical-components'

<Staff initialNotations={notes} beatsPerMeasure={4} beatDuration={NotationType.Quarter} clef={Clef.TrebleClef} />

Result:

Specifying Key Signature

The Staff component allows you to specify your own sharps or flats for the key signature. To create a staff in E Major, for example, pass an array of the the four sharped notes into the sharps prop:

import { NaturalNote, Staff } from 'musical-components'

const EMajor = [NaturalNote.F, NaturalNote.C, NaturalNote.G, NaturalNote.D]

<Staff ... sharps={EMajor} />

See example including key signature usage here.

Core Library

The library contains React components for rendering musical notation and the core logic required, such as determining whether to write an sharp, flat, or natural next to a note based on its pitch and the staff's key signature. It also converts musical pitches into audio frequencies and sends / listens to MIDI messages. The React UI optionally highlights the notes as they are played by intercepting these MIDI messages.

The primary React component is <Staff />, with the following props:

*optional

Examples

See examples here.