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
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.
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!