HTML5 Audio Support on Android Devices

Posted by & filed under Front-End Development.

UPDATE: Here’s a new post about a cross-browser HTML5 audio player with Flash fallback that effectively solves the problem described below.

In a previous post, I mentioned that I wanted to see first-hand how each browser renders default controls for the HTML5 audio element. I created a simple demo page and tested it in the following browsers:

  1. Firefox 4 – Mac (OSX 10.6)
  2. Safari 5 – Mac (OSX 10.6)
  3. Chrome 10 – Mac (OSX 10.6)
  4. Internet Explorer 9 – PC (Vista)
  5. Firefox 4 – T-Mobile G2 (Android 2.2)
  6. Opera Mobile 11 – T-Mobile G2 (Android 2.2)
  7. Default Browser – T-Mobile G2 (Android 2.2)
  8. Safari – iPad and iPod Touch (iOS)

As I tested the demo on the G2 in Android 2.2′s (aka Froyo) default browser I was surprised to see that I get neither the browser’s default controls nor the fallback message enclosed inside the audio element. How could this be?

It’s my understanding that any text between the opening and closing audio tags will be displayed in browsers that do not support the audio element. So if that text doesn’t appear in then the browser supports HTML5 audio, right? So why does Android 2.2′s browser display the following:

Default HTML5 Audio Controls - Android 2.2 (Froyo) - Native Browser

In every other browser tested, the following code rendered either audio controls or the fallback text:
<audio controls="true">
<source src="media/AwMan.mp3"/>
<source src="media/AwMan.ogg"/>
Your browser does not support HTML5 audio.
</audio>

Logically, this tells me Android 2.2′s browser doesn’t support mp3 or ogg media types which is odd given the fact that every other tested browser supports one of the two codecs. So if Android’s browser doesn’t support these codecs, which does it support? Again, I created a test page to help me answer this question. (Click here to see which audio codecs your browser supports.)

If you view the source on the test page you’ll see that first I check whether the browser can create an instance of the audio tag and whether it has the canPlayType method. If that test succeeds, I then test the most widely used codecs to see if they are supported in this particular browser. Calling canPlayType for a particular codec returns either “probably”, “maybe” or empty. Empty means that the codec isn’t supported. When I visit this test page on my Android device I see the following:

Android 2.2 HTML5 Audio Support

As you can see, technically Android 2.2′s default browser supports HTML5 audio (in the sense that programmatically-created element has the canPlayType method) but it can’t play any media files encoded with popular codecs. So as it turns out in the case of the native Android 2.2 browser, you can’t simply let the browser interpret the markup to make the determination as to whether it can play audio. Though Google will likely fix this in future versions of Android, it will be up to the various service providers as to when this update is distributed to users. So it’s likely that this will continue to be an issue for awhile. This is definitely something to consider when providing fallback content for HTML5 audio.

13 Responses to “HTML5 Audio Support on Android Devices”

  1. Libby

    Thanks for the concise summary and test code – very useful! I’ve linked to this blog from my tutorial on using PhoneGap Media (audio) on Android.

    Reply
  2. Rohit

    Hi Brian,
    I am into the same problem. I am developing an application using sencha touch but not able to run the audio on any android browser.

    Have you got any lead on this?
    Regards,
    Rohit

    Reply
  3. Marga Hoijtink

    Thank you. I never understood what the problem was. I installed Opera on my android and, audio works but I had newer problems in getting audio work on all the mobile devices. I tested an samsung galaxi gio and an flypad touch II

    Reply
  4. Gedi

    On my Samsung GT-S5360, Android 2.3.5

    Opera Mobile 11.50:
    OGG, MP3, AAC, WAV, PSM – probably and working! :)

    Default browser and Dolphin 7.2.1 (WebKit):
    OGG – no,
    MP3 – maybe (but not working),
    AAC – maybe (but not working),
    WAV – no,
    PCM – no
    :(

    Reply
  5. Carl, Sweden

    Finding it difficult with laters browsers (eg. Dolphin, Boat, stock) as well. Having one .mp3 element and one .ogg element, and neither plays. With Firefox, it works a charm. Running Gingerbread 2.3.6. Unfortunately, I can’t try out Chrome since it’s available only on Android >4.0.

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>