Audio and Old Androids

I just got done working on a project that involved the use of the audio tag (with flash fallback for IE) and thought I would share a couple of the issues that we ran into in working on it, and how they were solved. For those of you interested in such things the project was the new Scripture Mastery activities for seminary students, high school students enrolled in a religion class sponsored by The Church of Jesus Christ of Latter-day Saints.

The project included all sorts of new ideas and thoughts, and is using a pretty custimized version of Backbone as the core of its client side operations. But I digress...

So audio tags. They are really pretty awesome, and they work pretty well in theory for everything that supports them. The problem is that there are some hangups in older versions of browsers that you would think wouldn't have any issues with them at all. I am looking at you Android browser.

We couldn't figure out why android browser, not chrome for android, but actual android browser, was having issues with our audio tag. For some reason it decided to balk completely, not even downloading the audio file. After we spent a couple of days expirmenting with solutions and different ways of structuring the data I though I would share so that you don't have to do the same thing.

The first thing you should know is that Android browser does not support audio over SSL. Not sure why that is. but it doesn't. We tried a variety of ways of structuring the audio tag, but if the source for the audio involved communicating over SSL it wouldn't even begin the request. So lesson #1 avoid SSL.

The second thing that we learned, was that the tag doesn't seem to work either. This is actually a bigger problem in some ways. We wound up having to detect old versions of Android browser and serve them a different template for the audio component that used the src attribute instead of the tags. If you are going to support older Androids then you might want to do something similar. The detection script we are using looks like this:

var ua = navigator.userAgent.toLowerCase()
, is_android = ua.match(/android/gi) && ua.match(/crmo/gi) === null;

it is a modified version of one I found on stackoverflow and promptly lost. If you find the original let me know so I can link it up here.

Hopefully those two things will help save you the time that we spent tracking them down. Good luck out there in the trenches!