webmidi

Nice job. Having built a couple of play-by-ear training games, my recommendation would be to add support for MIDI controllers. If you use the WebMIDI.js project, it should be relatively easy to set up. https://github.com/djipco/webmidi

The original Hatnote Listen to Wikipedia site[0][1] does not have HTTPS support yet, and I wanted to try out the Web MIDI API[2] on browsers, so I wrote this web app to try that out. The Web MIDI API is too low-level for me, so I used a helper library called WEBMIDI.js[3] to help with that. This web app is written in Plain HTML, JavaScript, and CSS to keep the page lightweight, to simplify the development process, and to minimize the amount of external dependencies. More information on this including its features can be found in the README file at: https://github.com/explor4268/wikiwaver (Codeberg mirror: https://codeberg.org/exploraz/wikiwaver) [0]: http://listen.hatnote.com/ [1]: https://news.ycombinator.com/item?id=9972781 [2]: https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_AP... [3]: https://github.com/djipco/webmidi

I've built a small-medium sized project around this library and React on the front end: https://github.com/djipco/webmidi You can send and receive MIDI messages with this library both from the browser and within a Node context. Along the lines of the React/browser lifecycle, I would be careful with listening to MIDI inputs. You have to add guards for when an input no longer exists and be careful when creating listeners. React Hooks help with this but it's easy to create footguns if you're reading and sending MIDI data.