← Back to the work

Modalation

Music, through a story.

I built a way to explore musical modes through storytelling, a playable piano, and AI composition.

Learning design & development · Brown University, EDUC1485
Next.js, Tone.js, Claude, Supabase & Zod

The starting point · A short scene, poem, or personal story. Demonstration text in the implemented interface.

Modalation story input containing a demonstration story about leaving a familiar city and finding a new beginning

Modalation story input containing a demonstration story about leaving a familiar city and finding a new beginning

The starting point · A short scene, poem, or personal story. Demonstration text in the implemented interface.

A musical choice · Hear the keys, choose three anchor notes, and replay their sequence.

Modalation’s two-octave piano with D3, F3, and A3 selected as three anchor notes and the sequence player below

Modalation’s two-octave piano with D3, F3, and A3 selected as three anchor notes and the sequence player below

A musical choice · Hear the keys, choose three anchor notes, and replay their sequence.

Starting with a story

I built Modalation with Avery Espiritu for Brown’s EDUC1485 course, exploring how a personal story could become an entry point into musical modes. A learner might recognize that music feels unsettled, hopeful, or bittersweet while having little language for the notes creating that impression. We narrowed a broader music-theory idea to modes so that one interaction could receive more attention.

My work connected the prototype to a functioning composition and playback system. After the story, three fixed questions ask how it begins, how its intensity changes, and what the ending should evoke. The answers make the learner’s emotional intention explicit. I connected a two-octave piano to browser audio so they could hear notes, select three, and replay a sequence. Those choices become anchors the composer is instructed to feature: a musical contribution made before the learner needs to name a mode.

Giving the composer more context

The piece follows an opening, development, climax, and resolution, each with a mode and playable notes. During development, the model tended toward familiar pairings, such as Ionian for triumphant endings and Aeolian for sadness. That could turn an exploration of expressive possibilities into another set of fixed associations.

I expanded the composition instructions to make the full modal palette explicit and added retrieval from a Supabase collection of modal knowledge. For each narrative section, the system looks for emotional keywords. When that search returns too few candidates, it broadens the search using tension and brightness. The retrieved descriptions give the composer context for an interpretation the listener can hear and question.

I connected Claude’s response to a structured composition format and added a Zod check for the data the player needs, with one correction attempt when the response fails validation. Each section arrives with its mode, notes, durations, and bass part, ready for the same playback system.

Following the sound · The active note stays beside the section’s mode and emotion. Implemented playback with a demonstration composition.

Modalation composition player during playback, showing the active A3 note, Dorian mode, melody and bass note chips, and section controls

Modalation composition player during playback, showing the active A3 note, Dorian mode, melody and bass note chips, and section controls

Following the sound · The active note stays beside the section’s mode and emotion. Implemented playback with a demonstration composition.

Hearing and changing the result

I built playback around listening to one section or the whole piece, with the current melody note highlighted and an explanation alongside it. I later added a quieter bass part and adjusted note release and sustain.

I also built an edit panel where the learner can revise the story, choose different modes, and generate another composition. A listener can return to a choice, change it, and hear another interpretation.

Revisiting a choice · The opening is changed from Dorian to Aeolian before regeneration. Demonstration content.

Modalation editor with the opening changed from Dorian to Aeolian, alongside editable modes for the remaining sections and a Regenerate Melody control

Modalation editor with the opening changed from Dorian to Aeolian, alongside editable modes for the remaining sections and a Regenerate Melody control

Revisiting a choice · The opening is changed from Dorian to Aeolian before regeneration. Demonstration content.

Regeneration can also change the melody, which limits how directly a learner can attribute a difference to the mode itself. A next version would hold the melody constant while changing its mode, giving the listener a more focused comparison and a concrete starting point for reflection.

Based on our project specification and the implemented application. The images show the working interface with a demonstration story and composition; learning outcomes have not been measured.