Making a playable audio player used to mean you had to embed a Flash player or a Quicktime file into your website. Luckily, now there is a way to add a simple HTML5 code that will not only play the audio file, but will create a player that the user can control. You will want to use HTML5 over Flash because many of your readers will be using a mobile device, and not all mobile devices are flash-enabled. We will, however, create a Flash player as our fallback in case a browser cannot handle HTML5 in this tutorial. You can also use a Quicktime file as the fallback, but keep in mind you will have to convert the file to an .mov.

The HTML5 audio and video tags make embedding files easy, and eliminates the need for the embed and object tags. As easy as they are, however, they have a few quirks that we need to fix. Some browsers, like Firefox, can’t play .mp3 files through the player. However, Firefox can play .ogg files, which browsers like Google Chrome cannot play through the HTML5 audio tag. We’ll need to upload and embed both of these files. The browser will only display the audio file it can play, so there’s no need to worry about having two audio players in your post.

Here is the final code that we will be using. This will include 2 versions of the audio files (mp3 and ogg), as well as a flash player as the fallback for browsers or devices that can’t handle HTML5.

<audio controls="controls">
   <source src="yourURL.mp3" />
   <source src="yourURL.ogg" />
<!-- fallback -->
<embed type="application/x-shockwave-flash" flashvars="audioUrl=yourURL.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="650? height="0? quality="best"></embed>
</audio>

If you prefer, you can simply add text as the fallback. Here is what this code will look like.

<audio controls="controls">
   <source src="yourURL.mp3" />
   <source src="yourURL.ogg" />
<!-- fallback -->
Your browser cannot handle HTML5.
</audio>

*Note: It is STRONGLY recommended that you use the Flash player as the fallback