Can you elaborate on this? In my limited experience with React, it takes over your whole application, or at least the whole page. How do you mark areas as "don't touch this"?
This application is intended for live performance, so it uses a few keyboard controls to control the application state. These controls aren't intuitive, so you'll want to read/remap them in the gear-menu. If you're unclear on what live-looping is, or how to use this application specifically, check out the help menu (the big question-mark button) for a brief rundown.
Also note that this application depends on the Web MIDI API, which, AFAIK, is only available in recent versions of Google Chrome. Some features should work in other browsers, such as testing the synthesizers and using microphone input, but if you want the intended experience, you'll need to use Chrome.
Anyways, I hope you alls have fun with this. It was built with Wad.js, a Web Audio framework that I wrote. Check it out on github: https://github.com/rserota/wad.
Certain features that I depend on (particularly midi input) are only available in chrome as of right now, so I honestly only test it in chrome, though most of the basic functionality ought to work in other browsers.
Are you asking if it can play a song recorded in a midi file, or if it can play sounds based on input from a midi keyboard? Either way, I think the answer is no.
Beep.js really isn't a synthesizer, it's more of a step-sequencer. You might want to check out WAD.js, which is more concerned with synthesizing sounds than scheduling them (it has filters, LFOs, other effects, etc). https://github.com/rserota/wad.
Full disclosure, I wrote WAD.js.
and btw it's totally possible to make well-timed music with web-audio. I've got a midi keyboard hooked up to web-audio based looper, and that's what I use as my primary instrument these days for practicing. It works fine for me.