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.

Developing websites for multiple form factor devices demands that any images are the correct size to fit the device being used.

There are a number of ways of achieving this, one is to store all the relevant sizes of an image for later use, another is to store one version of an image and automatically resize it as needed.

Certain images, such as logo’s and images with text on them do not readily lend themselves to being resized as the text can become stretched, so the best option for these is to store custom built images for different size devices.  As these images do not tend to change frequently, the overhead of storing the separate images is not prohibitive.

For product images and other frequently changing media, storing multiple different versions of the image becomes a headache.

bemokoLive allows you to resize images on the fly and looks after caching of those resized images for future use.  The Image Transcoding addon used to be accessed via a Freemarker macro which was OK – but the developers have made it even easier in the latest version of the framework.

Image transcoding is now available as an HTML5 custom data attribute on the <img> tag itself, so transcoding an image in a page is now very simple.

As an example, if I have an image

http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg

And want this image to be displayed 100px wide, I can do the following:

<img src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg" data-rule="100.jpeg" alt="radio"/>

The data-rule attribute allows me to control the size of the image, so I can scale or crop to any size.  If I wanted the image to be 100x200px in size, I would say:

<img src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg" data-rule="100x200.jpeg" alt="radio"/>

The tag can also be set as a variable, giving the ability to access device attributes, so I could say:

<img src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg" data-rule="${device.displayWidth / 2}.jpeg"
 alt="radio"/>

To give me an image half the width of the current device.

To see an example of these tags in action, visit the image transcoder demo page.

For more details on the rules available see the documentation