Synchronization of rhythm and key. How to do?

Question

JavaScript

Hello everyone, I'm trying to create a website on music literacy. But the main problem is the creation of a program so that when playing a rhythm, for example, a midi file, you need to press a key. I don't know which direction to go.

Answer 1

There are two tasks here: play a midi file in the browser and evaluate hitting a beat by pressing a key.
It's easy to google midi file players for the browser. But so far I have not noticed that they have an API for highlighting strong shares. Another inconvenience: midi is not notes, there is no time signature, tempo. Just the start time of the note and its duration in milliseconds, conditionally.
Better is easier. I would take as a basis a loop player (short pieces of audio that can be played cyclically). For them, the duration, dimension (manually, but by ear, in advance), the reference point are known exactly. Upload another audio file from your server. Play it back, see how close to the times you're looking for click events arrive.
Start with a simple fiddle: load up a short audio fragment, have it play in a circle (how do you do that?) and register spacebar presses: the goal is to hit 8ths.
With the same "engine" it is quite possible to train on whole songs - to fall under the plywood. You only need to mark each file in advance: when the first measure begins and what exactly is the rhythm - so that the grid fits exactly on the whole song and does not move out by the end.

Answer 2

In the direction of studying the instrument (not musical!).
Learn javascript.