Ask HN: Tools or frameworks to build music theory games

Ah, I know the feeling. I also had a teacher who built his own things with very limited coding skills. Then I started making quick flashcard-style exercises and he was a lot of help testing and helping refine these. So now I have this site with various tools I built over the years: https://www.onlinemusictools.com/

Libs that helped:

- https://github.com/saebekassebil/teoria for scales, chords etc

- https://github.com/0xfe/vexflow for notation

- https://github.com/goldfire/howler.js for playing piano samples. I used to DIY (because I love DIY), not even using WebAudio but recently tried howler and it's abstracting a few things I don't need to worry about

- https://github.com/omnibrain/svguitar/ draw guitar fretboard. I recently did my first guitar-specific exercise and this was good. I even filed a feature request and the dev did it

I'd be happy to help you and your prof if you need anything, lmk

https://github.com/tonaljs/tonal does a bunch of theory stuff. I think there’s another JS library I’ve used too but I can’t think of the name.

If he wants to generate audio, Tone.js can be a useful higher level abstraction for WebAudio.

Nobody else has mentioned it, but Music21 is an extremely good library doing just this: https://github.com/cuthbertLab/music21

I've used it to build an open source vocal range detector: https://www.makeartwithpython.com/blog/vocal-range-python-mu...

I am not sure if it is only JS libraries you are looking for (since it is an Electron app), but I released a fairly comprehensive python music theory library that not only supports Western tunings, but all sorts of equal temperaments. It even has some support for post-tonal music theory.

https://xenharmlib.readthedocs.io/en/latest/

I made a webapp for learning sight reading:

https://www.babeloop.com/

It's built mostly from scratch except for the disply of notes that uses VexFlow and the playing of notes, that uses Tone.js

VexFlow is pretty cool.

There are js libraries for dealing with music theory; I can look into that again if you need.

Master music theory on guitar: select a key and see all its chords and note degrees visualized! ( Created this so that I can jam with friends on any random key )

https://humandotlearning.github.io/guitar_visualiser/

Feedback welcome!

Tangental: Came across an app aspiring to be 'duolingo for math', could the same be possible for music. I played guitar for ~10 years yet if I hear two tones, I struggle to tell which is higher and which is lower! (unbelievable that it would be so hard, when others have relative/perfect pitch!). So you could do duolingo for tones, or duolingo for modes etc.

Very Tangental: I had another idea for a 'music' game. Years ago, I used to mumble. People couldn't always understand me. So I randomly made a collection of phrases I struggled to say crispy to practice them 10 times each per morning. It improved my articulation a lot. I sometimes do the same (as a form of vocal exercise) but I made it way more fun by putting on one of my favourite rap tunes and cranking up the playback rate. For example chance the rapper's 'no problems' or 'angel' at 1.5 speed is a great vocal exercise. Perhaps this could be gamified. (I guess technically, it already is, as it's already a fun way of doing a boring task).

I'm currently working on a Python-based demonstration of some music theory concept for an article in the Paged Out! magazine. Very early stages but it might provide some inspiration regarding how to describe music theory concepts using code: https://github.com/tiniuclx/harmonylib

I've also made a "music theory interpreter" in Rust that goes a bit further. The source files for music theory & the chord database might prove especially interesting. https://github.com/tiniuclx/harmony-explorer

Finally, Ian Ring's website is a very fascinating place to learn about scales in particular: https://ianring.com/musictheory/scales/

Off-topic, but I have tried to build (in Java/Swing, sorry I am old) a piano keyboard where ALL the keys are white. [so you keep the same chord patterns, whatever the tonality you want to play in]. With the small keys of a computer keyboard, that is much easier to pack the 12 tones on a single keys row, reachable by all fingers of both hands. (whereas this one will probably eventually wreck your wrists: https://www.classicfm.com/discover-music/instruments/piano/s...) Anyone knows if someone else has worked on something similar?

It's not really a framework, but I've been having a lot of fun live coding music in Sonic Pi: https://sonic-pi.net/

It has built-in functions for chords and scales and is pretty easy to make catchy loops.

Wow, thank you all for your answers, I just realised now how much traction the post had!

I shared the whole conversation to my teacher, VexFlow looks super neat! https://www.babeloop.com/ is a super nice tool for me, I just bookmarked it.

Thanks again, incredible resources and community!

Are you looking for things that enhance Electron, e.g. JavaScript libraries, or are you also looking for other tools like Electron?

If you also look for the later, game engines like Godot might also be worth a consideration. With it you got a lot of flexibility to build what you want while also making the coding part slightly easier.

I am also building a piano-learning game.

I remember using WebMIDI for the interface, TonalJS for chord/theory.

From another comment, https://github.com/0xfe/vexflow looks cool, I could use it together with PIXI.js for the rendering.

Not a direct answer to the question, but the app Tonaly on iOS is INCREDIBLE to provide a smooth UI on top of music theory. Very much a learning by doing experience.

Imho, a mandatory checkpoint for whoever plans to code any UI on top of music theory

There are already some VC funded startups in the field of piano teaching and since piano is a digital tool, they are probably working on including every part of teaching, besides the interpersonal connection between student and teacher.

I wonder how teaching will look like than.

I've also been looking for a sheet music rendering and editing library (i.e. placing notes) library for java (or any other way to write for android/ios). So far I haven't found much so interested to see what people are using for this.

I created this scheduler library which can be used to play a sequence of notes, create a metronome, drum machine etc. https://github.com/errozero/beatstepper

On the subject of music games, does anyone have good vocal training game suggestions? I used to be quite a good singer in my youth, but aside from my shower, I don't get a lot of practice now, and would like to.

Orthogonal to the music theory itself, there's the question of general learning methodology.

One approach that seems promising is combining spaced repetition with knowledge graphs. The graph helps map knowledge areas and dependencies. For instance:

- Notes depend on Pitch.

- Intervals depend on Notes.

- Chords depend on Intervals.

...etc. The system would ensure concepts are mastered in the right order before progressing and use spaced repetition [1] to determine the optimal intervals for quizzing the student.

A site discussed on HN previously outlines how it applies this approach to teaching math [2].

Also, check out Hookpad [3], which offers some innovative tools for learning music theory.

--

1: https://en.wikipedia.org/wiki/Spaced_repetition

2: https://mathacademy.com/how-it-works

3: https://www.hooktheory.com/