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!
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.
Okay, I stand corrected. I did a bunch of research, but I clearly missed some superior MIDI players. I'll take a look at FluidSynth-lite and see if there's some way to use it.
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.
Awesome job - I’m about to cry from the memories this brings back. I really appreciate the effort put into porting a proper MIDI player to the browser while keeping page optimization in mind.
Dragging and dropping to play a midi is a great touch!
Great job putting all this together! Brings back memories.
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.
You're right. Reverb sounds way better with the version of timidity available on Homebrew. I noticed that brew is installing TiMidity++ (http://timidity.sourceforge.net/) instead of libTiMidity (http://libtimidity.sourceforge.net/) which is what I ported to WebAssembly. I'll look into the differences between the two, but if anyone knows more please share.
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.
In part the midi thing on GeoCities was stimulated by the lack of any semblance of copyright controls. You saw a graphic, sound, etc., You stuck it on your own page.
Then framing grew big (putting other people's content inside your frames) and content ownership broke in to the web.
That's really cool. I struggled to get a good midi engine working on linux and even what I have still messes around sometimes. Plus the instruments, while similar, aren't quite the same as those old school midi tunes from back in the day.
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 never realized midi support had declined so much all over
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.
Just to be really, really clear so that those unfamiliar with MIDI don't get confused or given incorrect information while reading this...
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!
Just a heads up in Chromium version 68.0.3440.106 (Official Build) (64-bit) the midi's seem to be playing back at 10x or faster. In Firefox 61.0.1 (64-bit) at 2x or so. I'm on Ubuntu 18.04.1 LTS. Other generic web midi players play at the correct speed in either browser. Not sure if timidity has some timing issues that might be caused by the combo of OS and browser. Other than that, wonderful job and great idea!
I'm so glad this exists! The feature of playing a MIDI file in a webpage was one of the things that inspired me to learn web development when I was 10 years old.
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.
Thank you, this is awesome! I used to collect my favourite MIDI tunes around the web (and I still have them on my HD). I always thought how amazing it was to have so much music yet take up so little space on my drive. This really brings back memories of the music that automatically played on the background of personal websites.
Yep, I plan to add a way to suggest tags for each MIDI. And then list the top 20 tags on the homepage for easy browsing. Does this seem like it would work for you?
I remember when I would get a new computer or upgrade sound cards, one of the first things I'd do was play some midi's to see how they sounded. At some point, I got a Yamaha keyboard for a gift and it happened to have a midi interface. With that, I could play my midi files through the keyboard, which sounded so much better than what the sound card could do. The keyboard also featured LED's above each key and you could isolate a midi channel to see what notes were being played. It was such a neat way to learn songs.
I actually still use midi files today if I want to do things like analyzing the chords or harmonies of a song, or if I'm learning it on guitar and a midi file is available, I can use it and easily do things like slow the track down, learn the parts, and then gradually speed it up.
Some of the midi's produced for popular songs are also very well done (although some are pretty bad!). If you're into music production, you can easily import them into your DAW and assign the channels to high-quality plug-ins and have something that actually sounds close to the real recording.
Although it's understandable why midi's days as a consumer music format are over (it was never meant to be that, anyway), it's somewhat a shame since there aren't a ton of midi files out there for songs after 2000 or so.
The tricky part with the 100k downloads is that you do not have all the meta data for each file. You just have the filename, so some are just called “index.mid”. Which I guess is nice for a random surprise when you play it.
My shameless plug is my old MIDI site called MIDI Delight. I had user registration, ratings, comments, top 10 lists, etc. I always wanted to get it working again like you did. It would be cool to see more user features added on your site.
I’m glad there is a new MIDI site carry the torch.
Perhaps a crawler can find the identical file (checksum/md5) and collect meta data: alternate filenames, urls, zip archive names... It was next to this file in this list/zip archive... And in this sub folder name, on this page on this wayback machine link... So associations can be built automatically?
Also for each unique checksum with listed alternate file names,
Perhaps user content: ratings, similar files, comments... A wiki like page where the automaticly generated meta data can be vetted...
Oh and suggested sound font and other settings to play that particular file maybe.
I'm interested in finding ways to better organize the MIDI files. I'm curious how you figured out which category to put each MIDI file in on your website. Was that done manually by you?
Yup I had a whole UI to add the MIDI’s and apply a genre. Plus I would get the time and size etc from the file when I uploaded it. Much of it was manual. Also the reason why I never got to 100k :(
I'm currently using the FreePats soundfont (https://freepats.zenvoid.org/). I'm curious which soundfonts you'd like to see? What are other, better-sounding choices?
The "Fluid" pack which ships with MuseScore and "Musyng Kite" pack which is just found online are both Freely licensed and sound "better" in karaoke-parlor kind of way (though personally I think I prefer the MIDI sound you have now, which is a bit closer to how I remember it sounding before my dad invested in a SoundBlaster card.)
Having options for the overall playback sound is one of the cool features of MIDI though.
Playing a MIDI file, then playing another MIDI file, then playing _another_ MIDI file, causes the "Mute Tab" feature to break. The icon disappears and right-click-Mute-Tab no longer works easier. Can somebody else confirm? Firefox 61, latest OSX.
I used to play MIDI files on my windows 3.1 machine, so this is great nostalgia. The quality was dependent on the instruments available on the soundcard. It wasn't until years later that I realized the "real" version of a song I had listened to sounded very different to what I knew!
I remember discovering mod files, just before MP3 became a thing. Absolutely blew me away what some people achieved with that format. I remember having a version of Snap's "Rhythm Is A Dancer" which was virtually indistinguishable from the CD and yet only a few hundred KB.
That zip file is actually the one I mentioned in my comment here (https://news.ycombinator.com/item?id=17930684). It was the initial seed for the site. They actually had quite a bit of duplication that I removed by using content hashing.
I'll consider adding a big "download archive" button. Just curious: do you have any immediate plans for the archives, or just want to keep a copy for backup purposes?
Archival is a weird animal that doesn't behave like other things in tech. It's like scrapbooking. It doesn't have to be perfectly organized or available online. The archivist just has to be extremely consistent throughout his or her life, in order to make the files last for 50+ years, to be passed down to another extremely consistent person, and so on. Imagine WWI photos. In 1920, why would anyone keep those around? They had no message to portray, it was just a horrible recent event that you'd be called weird for trying to keep. Yet the few people in the chain of ownership were important for piecing together the photographic history we know today.
MIDI files are somewhat similar. Only a small population care, an even smaller population care a lot, but archivalists shouldn't be the one to determine to keep them around for 200 years. They just should, and forget it.
An option to download the archive would be great, just because it's always good to have an offline copy. Any chance you could also add the ability to upload new MIDIs to the collection?
Is anyone familiar with something like this but for MOD/tracker style music? I've downloaded quite a few and play them locally but it's hard work and fiddly.. it'd be awesome to just play them on the Web :-)
(Actually, I guess, sadly, just rendering tracker files to MP3 en masse and playing those would be easier.. if less cool technically.)
There's https://modarchive.org/ though it seems they're having some server trouble at the moment. Definitely worth checking out when it's back up though.
Are you by chance using an older iOS or macOS release? Since this is a hobby project, I decided to make BitMidi have extremely aggressive browser requirements. You must use an evergreen browser (Chrome, Firefox, Opera, Brave, etc.) or the latest version of Edge or Safari.
Specifically, the feature you're probably missing is URLSearchParams with a spec-compliant toString() method, which I believe only the latest versions of Safari and Edge have, despite what Can I Use says. https://caniuse.com/#feat=urlsearchparams
On this machine I'm using Firefox-ESR (Extended Support Release) on Debian Stable. That's conservative on top of conservative; quite the opposite of what you are targeting!
I have limited grounds to complain then (short of quoting Postel's law) . Hope you continue to have fun :-)
Ahh, that explains it. I'm sorry for the inconvenience. All I can say in my defense is that it was more fun to build the site using new features and because it's a new site I'm not dropping support for any existing users, just missing out on some news ones like yourself ;)
I expect the next version of Firefox ESR will have the necessary features to make the site work for you. Cheers!
I'm waiting for a Gravis Ultrasound version, might be awesome! For a quick comparison of "old-school" MIDI files played on (equally old-school) sound cards:
Amazing work. I wanted to do something with that same archive you mentioned but soon realized how difficult it would actually be. One idea I thought of that might still be useful - would it make sense to alter midi file playback so it uses only a reduced set of instruments? ie if something is asking for steel drum, just play that part on piano. Would that limit soundfont filesize?
My favorite MIDI player back in the day was http://www.vanbasco.com/
It had controls for transposition and tempo. It had visualization of the individual tracks, ability to mute and solo individual tracks
The site also contains a search engine for MIDI files, but most of the links are dead these days.
I can download the midi files but I can't seem to get anything to play directly on the site. The play button is simply non-functional piece of text with an icon next to it. This is in Chrome 68 on OSX.
It works on iOS. You may need to just wait a bit longer, as the instrument files need to load to play back the song and there's currently no UI to indicate that loading is still happening.
---
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!