The joys of same origin file access

Last night CJ was asking me about whether the Firefox Audio API supports files that are dropped onto the page using the File API.  "Depends on their origin," I told him.  We don't allow content scripts to get at raw audio data if the media resource isn't from the same origin as the page (also applies to file:/// if you don't disable strict origin checks).

Today I decided to experiment a little, and see if i could get something working.  I wanted to allow the user to drop media files from their local computer onto a web page, and have audio visualizations work using them.  CJ had been inspired by Mr. Doob's image demo, so I start riffing on that.

The way his works, the drop event gives access to the files that have been dropped on the page (event.dataTransfer.files).  So far so good.  But then it uses a FileReader and creates a data URL.  This method won't work for what I want to do, which is get access to the raw data.  To do that, I need same origin media.

I was complaining to Ted about this, and he told me about something I'd never seen before, namely, window.URL.createObjectURL().  This takes a file, just like readAsDataURL(), but it gives you a resource with the same origin!  Now I can use that as the src for my media element and happily get MozAudioAvailable events.

I made a simple demo that uses a Processing.js signal visualization to show how this might work.  Now I'm hoping CJ and others will use this to build some really amazing demos with the ability to swap media on the fly.  You could also use this technique to work with image pixel data, video files, etc.

This demo needs Firefox 4, Aurora, or a Nightly build.  Aurora and Nightlies now have support for Wave files in the Audio API.