MIDI on Mac, WTF (Updated)

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 mentioned A-Frame above.  A-Frame is basically a client-side JavaScript library that wraps the webVR API and webGL so that you can write VR apps in HTML.  This greatly simplifies things and lowers the barrier to entry for web devs like me who aren’t yet familiar with webGL and rendering things in 3D.  On the other hand, it’s yet another framework to learn and hides all the really cool things happening behind the scenes which ultimately can limit you if you never take a peek behind the curtain.

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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s