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.
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.
https://drive.google.com/file/d/1mqI7d6kd3zOIZ2VjbKaeu3f6u3a...
Most of the file names are wonky, but I think the artist and title information should be inside many of the files.
There should be some files in there that are long gone from the web, some I know are from amateur or unknown musicians. But as I said, the filenames are a mess, so yeah.
Then framing grew big (putting other people's content inside your frames) and content ownership broke in to the web.
I thought maybe my struggle was unique to Linux. Setting up sound drivers for recording, was fairly complicated even without adding midi into it. Though after the initial setup linux's audio production tools are fairly awesome. I never realized midi support had declined so much all over. It's nice to see projects that keep old technology alive, sometimes older, more simple things really do have appeal and it's always sad when things kind of vanish unnoticed.
I actually have no idea why MIDI support was removed from browsers. I understand that <bgsound> was a bad idea – autoplaying audio and all – but why did MIDI file support have to go too? I was under the impression that web browsers took backwards compatibility pretty seriously and deleting a supported audio format and breaking most of the sound on the early web seems like something that wouldn't fly today.
Does anyone know the story here?
MIDI does not sound like anything. It's instructions, a protocol, nothing more. The music will only sound nostalgic if the MIDI is triggering instruments that sound nostalgic.
There's also no such thing as an "old-school" MIDI file. The MIDI standard hasn't changed since its release in the 80s, and is just as if not more important today than it was back then.
Anyways, this is super cool and great job building it!
I'm especially impressed at the number of Rammstein MIDIs your site has! Das ist gut! :D
May I ask how I can contribute MIDI files? I may have some decent ones buried deep in my backup drive.
a category / theme browsing method would be added value i think
---
So, the context for this site is that I was reminiscing about the days of Geocities and Angelfire, when the web was quirky and fun. In those days, sites often used the <bgsound> HTML tag to include an auto-playing song in the background of a page. Usually the song was in the MIDI file format.
It’s hard to describe MIDI files if you’ve never heard them before. The MIDI aesthetic is synth-laced, nostalgia-inducing, old-school, and endearing. It’s mixed up with the first DOS video games I ever played and the first websites that I visited as a small child in ‘95 and '96. A textual description can’t adequetly capture the feeling of listening to a MIDI.
I was surprised and sad to learn that all major web browsers have removed MIDI file support. Perhaps this happened at the same time that the <bgsound> HTML tag was removed? This explains why I haven’t heard a MIDI in many years!
So, I really wanted to play a MIDI file. When I searching the web for a MIDI websites, I discovered that existing websites were quite disappointing. It was difficult to find a site with a decent user experience. Almost all the top sites were unmaintained or broken in various ways. Most sites could not play back the files directly in the site, requiring them to be downloaded and played in an external program instead.
Quicktime also dropped support for MIDI when Quicktime X was released in 2009 which inconvenienced many musicians and probably stopped many users from playing back (or discovering!) this wonderful file format. Technically, Apple still offers Quicktime 7 for download, which can play MIDI. But it’s a 32-bit app so it will likely stop working once the macOS version after 10.14 Mojave is released. Also, embarrassingly, the Quicktime 7 download link uses insecure HTTP!
Even the venerable VLC failed to play back the MIDI files I threw at it. (I later learned that VLC can actually play MIDIs and I just got unlucky with the few I tried, hah!)
There were some websites that could convert MIDI to low-quality MP3, and some sites offered inline MIDI playback using Adobe Flash, but they were flaky and impossible to get working in Chrome. Other websites implemented MIDI players in JavaScript, but they were usually missing instruments or extremely ineffecient multi-megabyte cross-compiled Emscripten libraries.
I eventually found a .ZIP archive with around 100,000 MIDI files. I wanted a way to search through them and share the best ones with friends. So I decided to build a site to address the shortcomings of existing MIDI sites.
And that’s BitMidi. A free way to browse and play MIDI files!
Feedback welcome!