The HTML5 Audio tag is an excellent convenience method for delivering audio in web pages.  Support for the tag is growing but is not universal, especially in mobile phones.  Android devices running version 2.2 or lower, for example, do not support the tag.

So what is the best way to handle this support when developing for mobile browsers?

bemokoLive ui groupings make this easy.  We can define a uigroup in the site-config.xml file for devices that do not support the HTML5 Audio tag:


<!-- iOS 4.x+, Android 2.3+ or PC but not IE 6, 7 or 8 -->
<ui name="html5.audio" expr="(device.vendor == 'Apple' and device.version ge '4.0')
or (device.os == 'Android' and device.version ge '2.3')
or (!device.isMobile and !(device.vendor=='internet explorer'))
or (device.name.contains('xxxblackberry9800xxx'))" />


This ui expression categorizes devices which match as supporting HTML5 Audio.

In the root ui (for basic devices) – we default to not supporting HTML5 Audio and deliver a download option instead:

play.html from the root ui group:


<div><a href="${controller.audioUrl}"><img src="/images/download.png" alt="Download" /></a></div>


We can redefine play.html in the html5.audio uigroup as


<audio><source src="${controller.audioUrl}" type="audio/x-wav"/></audio>


bemokoLive will pick the relevant file for the device accessing the site at run time.

This simple ui grouping and one line file allows us to support all devices, whether they support HTML5 audio or not.

See more on how bemokoLive can speed up multi-channel web development here.