Playing Audio On Portable Devices

An HTML5 audio player is probably the easiest way to get single tracks to play on a website. Its necessary to provide different formats to suit the various popular browsers. This one uses MP3, OGG and WebM. Use the freeware Miro Video Converter to convert the MP3 to these other formats.

HTML5 Audio Player

Each browser displays a different contol bar as do portable devices like the iPhone. The example shown here displays a uniform control bar on personal computers but reverts to the default on iOS devices. This is due to the fact that the javascript for the medielement audio player - show further down the page - effects any player on the page that uses the audio tag.

My reason for using this script is that the various browsers not only display different control bar lengths but Firefox has a loader that makes the page content jump out of place when the player is enabled. Giving the player a uniform controls with a fixed height and width puts a stop to this erratic behavior.

Styles can be added inline but its more sensible to create a class in the main stylesheet which can also include positioning and padding rules.

Note that the player on this page also has its alignment and padding set in the main stylesheet to position it correctly in relation to the text.

Visitors using an outdated browser will see this instead of the player...
Your outdated browser does not support HTML5.

Although the fallback version shown below will play the audio using flash in older browsers, and only requires an MP3, in most cases this may not be necessary.

Sjoerd Visscher discovered that, if you want CSS rules to apply to unknown elements in IE, you just have to do - document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist. This shim for HTML5 was given the name “HTML5Shiv” and the name has stuck. The script is now hosted by Google and all that's required is to add the URL to the script to the head of the HTML doc to fool older versions of IE into thinking it knows what HTML5 is. Get the code HERE

Fallback Audio Player

The mediaelement audio player is a good choice. It displays a uniform control bar in all browsers. The controls are replaced by the default one on portable devices like the iPhone/iPad.

Audio Jukebox

For the more adventurous, This Page has an example of a playlist style jukebox.

Click HERE for the flashy Audio Stax -the likes of which you have never seen before!