Hey HN, site author here! So, the context for this site is that I was reminiscing about the days of Geocities and Angelfire, back when the web was quirky and fun. I remembered how sites used to use the <bgsound> tag to include an autoplaying background MIDI file. Those files had such a nice, old-school aesthetic.
I wanted to hear some MIDIs, so I searched and found a .zip file with 100K+ MIDI files that someone posted to Reddit. I tried playing a few in Chrome, Firefox, Safari, etc. and then realized that they've all dropped the <bgsound> tag. Even Quicktime and VLC couldn't play back the files.*
There were some websites that could convert MIDI to low-quality MP3, and technically Apple still offers Quicktime 7 for download which can play MIDI, but it wasn't easy or fun to do.
Some websites offered inline playback with Flash (but it was flaky and hard to get working in Chrome), and the JS-based ones were missing many instruments or multi-MB Emscripten-compiled monstrosities!
I decided that I'd compile the best MIDI player written in C (libtimidity) to WebAssembly and put in lots of effort to optimize the bundle and include the minimal amount of code. The result of that is here: https://github.com/feross/timidity It's quite lightweight - just 34 KB of JavaScript and 23 KB of lazy-loaded WebAssembly.
Then I put a frontend on it, so it's easy to browse that .zip file's contents. And that's BitMidi.
I plan to ingest a lot more MIDI files in the future, perhaps from the Geocities MIDI archive on the Internet Archive.
Feedback welcome!
* I later learned that VLC can actually play most MIDIs and I just got unlucky with the few I tried! That's okay though – I got to learn a lot about MIDI files, Emscripten, WebAssembly, and modern front-end web techniques. And I made a cool site too :)
wow this is amazing! lovin the old school game tracks and also the way you built it. curious what it was like in the way of webAssembly and any performance issues you may have run in to. have heard some experiences that span a very wide love/hate spectrum.
Thanks! I found WebAssembly to be a joy to use. I mainly interacted with Emscripten and it worked great. One thing is that by default it produces a bundle with more JS that you probably need if you just expect the code to run in the browser. You can see what build flags I used to make the built JS super small: https://github.com/feross/timidity/blob/master/tools/build.s...
6 comments
[ 4.7 ms ] story [ 22.0 ms ] threadI wanted to hear some MIDIs, so I searched and found a .zip file with 100K+ MIDI files that someone posted to Reddit. I tried playing a few in Chrome, Firefox, Safari, etc. and then realized that they've all dropped the <bgsound> tag. Even Quicktime and VLC couldn't play back the files.*
There were some websites that could convert MIDI to low-quality MP3, and technically Apple still offers Quicktime 7 for download which can play MIDI, but it wasn't easy or fun to do.
Some websites offered inline playback with Flash (but it was flaky and hard to get working in Chrome), and the JS-based ones were missing many instruments or multi-MB Emscripten-compiled monstrosities!
I decided that I'd compile the best MIDI player written in C (libtimidity) to WebAssembly and put in lots of effort to optimize the bundle and include the minimal amount of code. The result of that is here: https://github.com/feross/timidity It's quite lightweight - just 34 KB of JavaScript and 23 KB of lazy-loaded WebAssembly.
Then I put a frontend on it, so it's easy to browse that .zip file's contents. And that's BitMidi.
I plan to ingest a lot more MIDI files in the future, perhaps from the Geocities MIDI archive on the Internet Archive.
Feedback welcome!
* I later learned that VLC can actually play most MIDIs and I just got unlucky with the few I tried! That's okay though – I got to learn a lot about MIDI files, Emscripten, WebAssembly, and modern front-end web techniques. And I made a cool site too :)
Hope this helps!