In 2017–2019 I developed a browser-based music notation editor titled Euphony, which was designed for SATB part writing. Users received real-time feedback on voice-leading errors such as parallel 5ths.

What follows is a brief technical description of the app.

User interface

Euphony is built with React.

Declarative routing is handled with React Router.

The editor itself is built with Vexflow, which renders notation using Scalable Vector Graphics (SVG). Vexflow is also responsible for overlaying analytical feedback on the score.

State

Global state is managed by Redux.

The most commonly dispatched Redux action types within the editor include ADD_NOTE, CHANGE_EVENT_DURATION, and so on.

As I developed Euphony I had to think about the most concise way to represent chords, keys, notes and other musical objects, as well as their interrelationships.

This led to a minimal state representation for each object. For example, notes in Euphony have the following signature:

  note = {
    id,
    step,       // Mod 7 scale step
    midi,       // MIDI integer
    duration,   // decimal duration in quarter notes
    onset,      // decimal onset in quarter notes
    voice,      // voice name
    tied        // is tied (boolean)
  }

Other data are derived from this minimal state, such as a note's accidental, octave, offset, the measure it is located in, and so on.

All musical objects are stored in Redux as plain JavaScript objects, and relationships between musical objects are normalized.

Sound

Sound is loaded and managed via the Web Audio API.

Screenshots

Instructor dashboard

Instructors can manage their course from this view, including the creation of modules, exercises, and real-time grade statistics.

Instructor editor

Instructors can create, edit, save, and publish exercises from Euphony's interactive music notation editor.

Instructor settings

Instructors can fully customize the kind of feedback that students receive.

Student editor

Students receive instant feedback as they work through an exercise.