HTML5 & Audio on the Local Filesystem

Everyone talks about HTML5, but unfortunately there are still a lot of gaps in its support. This was made clear to me as I was working on creating an audio player drop-in solution for a client.

The client is creating a webpage-on-a-CD (I know, I know) that will include audio samples of their music. Should be easy, right? Just use MediaElement.js to automatically create an HTML5 <audio> element (with Flash fallback). Just look at the wide support for <audio> on modern browsers:

• Firefox 3.6+
• Safari 5+
• Chrome 6+
• Opera 10.5+
• IE9

Okay, but it turns out that not all browsers can play MP3s. This is supposedly because of patent/open-source issues, so MP3 support may never come to those browsers. The <audio> specification doesn’t require any support for specific codecs. So that leaves the following browsers with MP3 support:

• Safari 5+
• Chrome 6+
• IE9

That’s okay, because we can fall back to Flash for MP3 support (and for older browsers that don’t support HTML5 yet).

But here’s the kicker: Many browsers have more restrictive security for local files than internet files. So if you want to play an audio file on your local filesystem (such as with a CD), then you’re out of luck — it has to go through a web server (HTTP) to play.

That leaves one browser that can play MP3s from the local (same) filesystem:

• Chrome 6+

Yes, that means that doing something as simple as <audio src=”file://somefile.mp3″/> won’t work on most browsers, even those with MP3 support. This results in not much support for HTML5 audio after all, if you need something robust (or want to test it on a machine without a web server).

There are many other deficiencies in browser support for HTML5 audio that you can read about in articles on the web. Until browsers add more support — and that’s a big maybe — your best bet is to keep using the demon-spawn known as Adobe Flash, or good old techniques from 1996.