Menu

1 / 2

A Browser Ear-Training Trainer in 350 Lines — Equal-Temperament Frequencies and Three Web Audio Footguns

DEV Community·SEN LLC·6 months ago
#bsbzpL5y
#footgun#javascript#webaudio#music#const
Reading 0:00
15s threshold

Reading a music-theory textbook is one way to drill relative pitch recognition. Loading a webpage is another. This is a 350-line ear-training trainer that plays a reference C4 then a target note (or a two-note interval pair) through Web Audio and asks the user to identify it. The interesting parts: the one-line equal-temperament frequency formula, the three Web Audio footguns I hit while building it ( AudioContext.state === "suspended" , missing the first note via osc.start(currentTime) , and the click-on-stop without an ADSR envelope), and a small DOM-free pitch module that gets 21 tests under node --test .

🌐 Demo : https://sen.ltd/portfolio/pitch-trainer/

📦 GitHub : https://github.com/sen-ltd/pitch-trainer

Three modes:

Mode Question Choices

Major scale C4 → one note in the major scale Do / Re / Mi / Fa / Sol / La / Si

Chromatic C4 → one of 12 pitch classes C / C# / D / ... / B

Interval Two distinct notes sequentially, then held together P1 / m2 / M2 / ...…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.