Web Audio / JavaScript / Interactive UI

Modern Harmony Trainer

Browser-based ear-training app for interval recognition, voicing construction, and modern harmony recall, built with JavaScript, Web Audio, and a custom interactive practice flow.

Modern Harmony Trainer interface
Overview

Recall-focused harmony training in the browser.

Modern Harmony Trainer is a browser-based ear-training and structure-building app for interval recognition, voicing construction, and modern harmony recall. It moves beyond a static quiz format by giving users focused practice modes, filterable challenge sets, and immediate musical reference playback.

The app is designed for players, producers, and educators who want to recognise harmonic structures by sound and function, rather than relying only on fixed keyboard shapes or visual patterns.

As a portfolio project, it demonstrates how I approach interactive audio tools: mapping musical concepts into usable software logic, then supporting that logic with clear UI behaviour and browser-based sound.

Key Features

What it does

  • Three training modes: Interval, Voicing, and Modern Harmony
  • Focus filters for narrowing the challenge pool by interval, voicing, or category
  • Three-octave circular note input: interval mode accepts pitch-class answers, while voicing and modern harmony modes require registered note selections across octave rings.
  • Live answer monitor showing selected notes, target note count, and immediate feedback during each challenge.
  • Reference playback using an internal browser-based instrument patch
Interaction Design

Built around structure, not just keyboard geography.

The trainer uses a circular chromatic input instead of a traditional piano-roll as its main interaction surface. Interval mode focuses on pitch-class recall, while voicing modes extend the same interface into registered octave-specific note selection.

The answer monitor keeps the selected notes, target count, and harmonic target visible during each challenge, helping users connect their choices to the required interval or voicing structure.

Technical Overview

Challenge generation and browser audio.

Challenges are generated from internal interval and voicing datasets, then mapped into pitch classes, target notes, and reference playback states. Each training mode changes how the answer is evaluated: interval mode focuses on destination-note recall, while voicing and modern harmony modes evaluate fuller harmonic structures.

Playback runs in the browser through a Rhodes-style Web Audio engine using wave samples, gain staging, filtering, and a synth fallback when samples are unavailable.

Working on an interactive audio tool?

I’m open to Web Audio apps, music-education tools, DSP features, and audio software collaborations.

Email me about an audio software project