Build an ear training app that plays intervals and chords in the browser
An ear training app plays a sound, asks what it was, and keeps score until the answer becomes instinct. Anticode can build one where every note is synthesised in the browser with code, so there are no sample files to license, and your progress is kept on your own device. It can play and quiz; it can't listen, because apps here have no microphone access.
What the drills are
Most ear training comes down to a handful of exercise types. Pick the ones your learners need rather than all of them; a teacher building for a GCSE class wants something different from a jazz guitarist.
| Exercise | What plays | What the learner answers |
|---|---|---|
| Intervals | Two notes, together or one after the other | The interval name: minor third, perfect fifth, tritone |
| Chord quality | Three or four notes at once | Major, minor, diminished, augmented, dominant seventh |
| Scales and modes | A run of notes up or down | Major, natural minor, Dorian, Mixolydian and so on |
| Cadences | Two chords at the end of a phrase | Perfect, plagal, imperfect, interrupted |
| Melodic dictation | A short phrase | The notes, tapped on an on-screen keyboard |
| Pitch matching | A reference note, then a second | Higher, lower or the same, with the gap narrowing |
Interval recognition is the usual starting point. Many teachers begin with a small set that sounds clearly different, such as the major third, perfect fourth, perfect fifth and octave, then add the rest only once those are reliable.
The sound: synthesised, not sampled
Apps built with Anticode can't load outside audio files, so the model makes sound in code with the browser's Web Audio API. For ear training that is less of a compromise than it sounds. A pure sine tone is too bland to hear chords well, but a few layered waveforms with a short attack and a gentle decay give a soft, piano-like or organ-like voice that is perfectly usable for drills.
- Equal temperament by default. Each note's frequency comes from a formula, so any key and any octave work without extra files.
- Random root notes. Starting each question on a different pitch stops learners memorising one sound instead of the interval.
- Replay and slow-down buttons. Hearing a chord again, or broken into its notes, is how people learn to pick the third out of the middle.
- A volume control and a first tap to start. Browsers only allow sound after someone interacts with the page, so the app opens on a start button.
Scoring that shows progress
A single score per session tells learners little. What helps is a breakdown: which intervals they confuse with which. If a learner keeps calling minor sixths perfect fifths, the app can say so and weight the next set of questions towards that pair. Ask for a confusion table, accuracy per interval over the last few sessions, and a streak of correct answers inside a session to keep the drill moving.
History is saved in the visitor's own browser, so a student who comes back next week sees their record. Nothing is sent to a server, which suits a school site well: no pupil data leaves the device. The flip side is that a teacher can't see the class's results, and a student who switches from a school laptop to a home tablet starts from zero unless the app offers an export file they carry across.
How to describe it to Anticode
Say who it's for, which drills, and how it should sound and score: "An ear training app for adult beginners learning guitar. Interval drills, ascending and descending, starting with thirds, fourths, fifths and octaves and unlocking the rest at 80% accuracy. Chord quality drills for major, minor and dominant seventh. Warm synthesised tone, replay button, a confusion chart per interval saved between visits. Calm dark design with large answer buttons."
Anticode's Architect may ask a question or two first, such as whether answers are named or tapped on a keyboard, then shows a plan before building. After the first version, change requests in plain words adjust it: "add a perfect cadence drill", "let me choose the instrument sound", "show solfège names as well". If it's part of a teaching site, see the interactive lesson and flashcard pages for related tools.
What it can't do
- No listening. There's no microphone access, so the app can't check sung or played answers. Pitch matching works only as a listening quiz.
- No recorded instruments. Real piano, violin or voice samples can't be loaded; every sound is generated.
- No class dashboard. Results stay on each learner's device. A teacher who needs to see everyone's scores needs a system with accounts and a database, such as a developer building from the Next.js export.
- No MIDI keyboards. Plan on answers tapped or clicked on screen.
Questions people ask
Can an ear training app built this way work offline?
Once the page has loaded, the drills run entirely in the browser, and published sites can be installed as an app with an offline fallback; test the installed app offline before you rely on it. Scores are saved on the device either way.
Can I sell access to it?
Payments can't run inside the app. You could put a payment link on your site's pricing button, but the app itself has no way to lock content behind a purchase.
Does it support non-Western scales?
Ask for them. Because pitches are calculated, the model can define other scales and tunings in code, though you should check the result with a musician who knows the tradition.
Can students compete on a leaderboard?
Not across devices. A leaderboard needs shared data. Each device can keep its own best scores.