How HTML5 Audio Controls Render In Modern Browsers

Posted by & filed under Front-End Development.

I created a test page using the most basic implementation of the HTML5 audio tag so I could see how modern browsers render the default controls. (You can view my test page here.) As is the case with almost everything browser-related, there is quite a bit of discrepancy in how each browser renders the controls. What’s surprising is how mobile versions of browsers render controls differently from their desktop counterparts.

You’ll also notice that the Native Browser on Android 2.2 (Froyo) doesn’t render the HTML5 audio controls at all. This is a known issue with Froyo and should be fixed in Android 3. Update: Read more about this here.

Take a look at how each browser renders HTML5 audio controls below:

Firefox

Default HTML5 Audio Controls - Firefox

Chrome

Default HTML5 Audio Controls - Chrome

Safari

Default HTML5 Audio Controls - Safari

Internet Explorer 9

Default HTML5 Audio Controls - Internet Explorer 9

Native Browser – Android 2.2 (Froyo)

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

Firefox – Android 2.2 (Froyo)

Default HTML5 Audio Controls - Android 2.2 (Froyo) - Firefox

Opera – Android 2.2 (Froyo)

Default HTML5 Audio Controls - Android 2.2 (Froyo) - Opera

Safari – iOS (iPhone and iPad)

Default HTML5 Audio Controls - iOS - Safari

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>