Ouch. Has timidity fixed the issue where playing 2 of the same note in sequence cuts off the release tail of the first note when the second starts? Fluidsynth is written in C and doesn't have that issue and sounds better (I assume this behavior matches good MIDI hardware, but not sure about the crappy Windows GS Wavetable Synth). fluidsynth-lite is a Fluidsynth fork with dependencies removed.
One issue I can already see is they use a SoundFont file (.sf2) instead of instrument patch files, which means the whole 100MB+ file probably needs to be loaded before playback. My current approach uses GUS patch files which have one file per instrument, so I can load just what's needed for a particular song and start playing much sooner.
Edit: It looks the GeneralUser SoundFont is only 31MB and it sounds almost as good as the 100MB+ one. So, while this will still be slower than my current approach of loading just the needed instruments, perhaps if I start loading it in the background with ServiceWorker and cache it forever, this could work. Thoughts welcome.
Dragging and dropping to play a midi is a great touch!
Out of curiosity I downloaded a .mid file to compare it with my local timidity install. The quality of the later is way better (I installed it from brew)... It sounds like it either use a better SoundFont or midi effects (like reverb) are not working properly on the site?
Is it just me? Not complaining, just mentioning it.
First step, I needed to build a MIDI player in JavaScript. At first, I was determinted to write one from scratch in JavaScript and use the Web Audio API to synthesize all the instruments in code. I thought this would yield the the smallest possible JavaScript file size.
However, I didn’t really have the audio engineering skills to pull this off. So ended up settling for an approach that uses SoundFonts, which are basically instrument voices or files that contain all the possible notes an instrument can play.
BitMidi uses the instrument voices from the General MIDI sound set released by FreePats.
Then I compiled the best MIDI player written in C (libtimidity) to WebAssembly using Emscripten. I put in lots of effort to optimize the built size and include the minimal amount of code. The result of my efforts are available in the npm package timidity (https://github.com/feross/timidity). It’s quite lightweight – just 34 KB of JavaScript and 23 KB of lazy-loaded WebAssembly, smaller than anything I’ve seen on any other site.
Then I put a frontend on it, so it’s easy to browse all the files. BitMidi uses all the best techniques that I know about to make it super fast and snappy. The site gets perfect 100s on all categories on Chrome’s Lighthouse Performance benchmark, which is extremely non-trivial in my experience.
I plan to ingest a lot more MIDI files in the future, from sources like the Geocities MIDI archive on the Internet Archive and elsewhere.