Scribbletunes just scribbled my afternoon…
I’m using the Scribbletune MIDI package on NodeJS for a sweet new personal project. It makes .mid files. I tried playing one. On Mac OS X. It didn’t work.
I tried it in Quicktime (suggested by the OS). It couldn’t read the file.
I tried VLC Media Player. It couldn’t read the file.
I tried Garage Band because someone somewhere online mentioned it. It doesn’t recognize MIDI extensions.
I said to myself, “Well forget it, I’ll try it in the browser, I’m a web developer after all!” The audio element in HTML5 does not support MIDI playback.
So any normal person would have given up and said, “Look, these files are probably bad, the examples from Scribbletune on Github must be bad, their working examples must be doing something different, etc etc.”
But not me. No, I downloaded some free MIDI players from Apple’s app store instead…
AND THE MIDI FILES PLAYED FINE!
I’ve since moved on from MIDI to regular ol’ MP3. Initially, I had a vague idea involving webVR, creating chiptunes on the fly, and visualizing the wave forms. All of those things are new to me from an engineering perspective so I decided to focus on the webVR and visualization part first which led to my first creation: a spastic 3D box rendered in webVR that scales with changes in frequency. WARNING: THIS CODE RENDERS SOMETHING IN YOUR BROWSER THAT CAUSES FLASHES OF LIGHT THAT MAY BE A HEALTH HAZARD TO PEOPLE SUSCEPTIBLE TO SEIZURES! I don’t really know how much of a hazard it might be, but better to be on the safe side. The final rendered thing is strobe-like.
I initially tried creating this app on Glitch because it’s very very convenient and A-Frame recommended it. Glitch is like JSFiddle but includes a web server written in NodeJS. So you can try out server-side code, not just client-side code. However, any assets you upload get served through their CDN, not from the domain your server is hosted on, which means you’ll run into cross-origin issues if you try to do something like I did and analyze the waveform of an MP3. Since I didn’t see a quick solution to this cross-origin issue (I wasn’t about to spin up an EC2 instance on AWS just to serve some MP3s and add a CORS header – really I would just host the whole thing myself at that point) I decided to download the code and work on it locally for now. That’s why I link to my github repo instead of something running, for now.
I will update this with some code and my take-aways later… but don’t forget: THIS RENDERS SOMETHING IN YOUR BROWSER THAT CAUSES FLASHES OF LIGHT THAT MAY BE A HEALTH HAZARD TO PEOPLE SUSCEPTIBLE TO SEIZURES!