How to get your music website working on the iPad
NERD ALERT: If you just want to enjoy some un-ironic rock, listen to TLFR here. Don’t read further, it will melt your brain!
Dear Fellow Nerds,
So, with the release of the iPad we decided to update the TLFR website for it, and also for the iPhone. Here’s the problem: the iPad and iPhone don’t run Flash. Slate has an interesting write up on the probable reasons why Apple hates Flash, but the result is that Flash audio players out there don’t work on iPads & iPods, and probably never will.
But fear not, because the emerging HMTL5 standard lets web browsers do a lot of cool things without the need for special plug-ins and other add-ons. There are some insane videos showing what HTML5 can do in a modern browser…
The TLFR site is run on WordPress, and we were lucky to find the very literally titled ‘Degradable HTML5 audio and video” plugin. This thing is great – when installed on your WP instance, it will serve up sleek HTML5 players in browsers like Safari (which is what the iPad and iPhone use), but ‘falls-back’ to the very nice flash WP Audio Player for browsers that don’t play HTML5 nicely.
But wait – FireFox IS an HTML 5 browser, so why can’t it use native audio playback and skip the Flash? The reason goes to MP3 licensing. Mp3 is a proprietary format, and the FireFox foundation hasn’t / doesn’t want to pay for the license for economic reasons perhaps and to slow down the spread of non-open codecs (the encoding / decoding algorithms that among other things make big audio or video files small enough to move well over the web). FireFox does support a fully ‘open’ audio codec called Ogg Vorbis – if you convert your original uncompressed AIF or WAV file to a .ogg file, Firefox opens and plays it in a sleek no-plugin-required player. Cool! And, it sounds great!
So, to review: you need your website to serve audio/video via HTML5 for it too work on iPads and iPhones. But, pure HTML5 playback won’t work on FireFox IF your files are MP3s, because of Firefox’s battles with the owners of the Mp3 format. Using the very cool Degradable HTML5 audio and video” plugin sidesteps the problem by playing MP3s using Flash plugins on FireFox, or smartly uses the OGG version if it’s available. [ You can't just use OGG files instead because many web browsers don't know how to play them].
Re OGG – it sounds really good. And, if you put the OGG version of the audio file in the same folder as the MP3 version, then the HTML5 player plugin will use the OGG version on FireFox.
So, how do you make OGG files? The best ways is to download the open-source, and quite excellent Audacity audio editing program. It runs on everything. In Audacity’s preferences, you can set the OGG quality – we went with 6 which is approximately equal to a 400kbps MP3 (very good) – then choose the menu option’Export to Ogg”. Note: DON’T just open your Mp3 in Audacity and save it to Ogg – because Mp3s are already ‘lossy’ (degraded) files, you’re missing out on creating a fresh, best-possible sounding Ogg file from the WAV or AIF original.
- use HTML5 to make the iPad happy
- use OGG format audio if you ALSO want HTML5 to work right on FireFox.
- use the Degradable HTML5 audio and video” plugin to simplify all this stuff on WordPress.
- And now… Too Late for Roses music works awesomely on the iPad.
In conclusion – Suck it, Sub Pop – our shit works on the iPad!