Ask HN: Tools or frameworks to build music theory games | Hacker News Reader

Ask HN: Tools or frameworks to build music theory games

135 pointspil0u37 comments

My music theory teacher has built from scratch, without much coding knowledge, an Electron app with games. Example of games are: guess the 2-3 notes randomly played by the piano, find the intervals etc. Those are multiple choice games mostly.

He is now on a journey to build games that interact with notes on scores, like colorize all the Cs, click on the notes that are wrong vs what you hear etc.

He is building everything from scratch, with the scores, the notes, and I'm wondering if there are some tools or libraries out there that provide much flexibility to build stuff for music theory.

View on HN

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/omnibrain/svguitar/ looks great! I recently built a small web app to help me drill some specific jazz voicings and wrote a rudimentary version of something like this. If I end up expanding it I'll take a look at this library instead.

Thanks for sharing.

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.

Tonal was great and easy to use for some simple personal projects I've made. Definitely recommended.

I've relied on Tonal heavily to build stringscales.com - it was a very pleasant experience. Much is already present, and extending the lib with more scales and functionality was easy as well. Definitely recommend

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.

Hey man, this is very cool and actually super useful for my practice. Is your code open-source? I'd love to generate random series :D

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!

It's great! However the whole page disappears if you deselect the checkbox. I think the checkboxes really want to be radio buttons.

Love this. Some feedback:

Not sure exactly what "Play Scale" is doing. Notes seem to be correct pitch but out of order.

I'd put a "Play Chord" button under each chord instead of at the bottom.

I'd like to be able to click/hover the notes on the fretboard diagram and have it focus on other fretboard positions for the same pitch.

For each key/scale, a list of a few example songs to jam along with would be super fun!

Thanks for sharing. Bookmarked and will be using.

https://strudel.cc

Wow this is actually quite impressive and fun to play with.

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).

Over the years I came across many applications for training pitch, intervals, chords, time signatures and so on. What’s so special about duolingo, the gaming aspect? I really dislike the Sass aspect of it and pay to play part.

Nothing special about duolingo, just that it gamifies something very dry and makes it fun, and won't let you progress until you're actually good enough (e.g. I would pronounce 'robes' [french for 'dress'] and it wouldn't let me pass until I pronounced it 'hhrobes'). 'Duolingo' is just a good (but as you point out, not the only) example of an app that gamifies, in the right ways, an otherwise dry topic.

There is a Duolingo for Music, worth a look! https://blog.duolingo.com/music-course/

What is this Duolingo for Math app?

I screenshotted the ad for it I saw (did not click on it so have no idea what it's like). If it's any good please report back

https://imgur.com/9Ea7ISw

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.

Yeah... one might use Sonic to load a csv and generate sounds based on your data, that might then be used as static assets in their app.

I recently helped a tutor using BespokeSynth to create audio explainers, wiring together frequencies and interactive oscillators and waveform viewers to explain resonant frequencies (or something, I didn't completely get it)

https://static.everythingability.opalstacked.com/bespoke_syn...

Is there a python equivalent?

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!

https://github.com/JuliaMusic/MusicTheory.jl

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/

Signals Music Studio channel on YouTube has a 30 min long video [0] on music theory map (knowledge graph) in VR. It’s not particularly in depth but spells out hope each concept connects to others.

[0] https://youtu.be/qeS8txkoUH4?si=PF0jH8VlTcbQpchn

Thanks! I'll check it out!

Reply on news.ycombinator.com