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

Flash designers all over are jumping for joy, thinking they’ll no longer have to build dual sites so that their clients don’t get ignored by Google, with this announcement from Adobe. But, read my comments after the blockquote to fully understand what this means for your business:

Adobe Advances Rich Media Search on the Web
“Until now it has been extremely challenging to search the millions of RIAs and dynamic content on the Web, so we are leading the charge in improving search of content that runs in Adobe Flash Player,” said David Wadhwani, general manager and vice president of the Platform Business Unit at Adobe. “We are initially working with Google and Yahoo! to significantly improve search of this rich content on the Web, and we intend to broaden the availability of this capability to benefit all content publishers, developers and end users.”

Google has already begun to roll out Adobe Flash Player technology incorporated into its search engine. With Adobe’s help, Google can now better read the content on sites that use Adobe Flash technology, helping users find more relevant information when conducting searches. As a result, millions of pre-existing RIAs and dynamic Web experiences that utilize Adobe Flash technology, including content that loads at runtime, are immediately searchable without the need for companies and developers to alter them.

“Google has been working hard to improve how we can read and discover SWF files,” said Bill Coughran, senior vice president of engineering at Google. “Through our recent collaboration with Adobe, we now help Web site owners that choose to design sites with Adobe Flash software by indexing this content better. Improving how we crawl dynamic content will ultimately enhance the search experience for our users.”…

“Designers and Web developers have long been frustrated that search engines couldn’t better access the information within their content created with Flash technology. It’s great to see Adobe and the search engines working directly together to improve the situation,” said Danny Sullivan, editor-in-chief, SearchEngineLand.com. “The changes should help unlock information that’s previously been ‘invisible’ and will likely result in a better experience for searchers.”

But there are many reasons not to get that excited, especially for small businesses, and here is why:

Flash is generally dependent on screen size- ie- it’s built to run on a standard computer screen- of a certain size. If you want it to work on a cell phone (and right now- it still doesn’t work on the iPhone) you have to build your files for each screen size.

Updating and creating content in Flash requires the Flash software- and the smarts to use it. Unless your Flash designer builds a database driven site- with a browser access portal, you are going to continue to pay out the yang to update and change your site. I don’t know what the percentage is of DB driven flash sites, but from my travels on the web- it’s pretty small.

Even if the site is built using a database, and works on all screens, and manages to meet all ADA and W3C standards for accessibility, it’s ability to interact with Google and play with other sites through social tools is nascent. It’s like getting on the web 2.0 bandwagon 4 years too late.

If you have a huge budget for a website and you like to keep your web monkeys in bananas, Flash may be the tool for you in about a year or two. However if you want the fastest, easiest, most compliant solution that puts your company in charge of your website without a web monkey, look to the many Open Source Content Managers that can have you up and running and indexed by Google today.

Matt Cutts is the guy at Google who figures out how to deliver better search results- what gets to the first results page. Officially he’s the Head of Web Spam at Google- which makes sense once you realize a big part of his job is making sure that you aren’t trying to “game” Google. All those SEO tricks that may work for a minute- aren’t near as useful as new helpful content on a fairly regular basis. We’re in an “Expert Economy” and those with the newest, best answers to solve searchers problems- will be the people who get to the front page.The days of the static brochure type site are long over.Watch the video- and realize, everything that Matt is talking about is what we teach in the Websitetology seminar. He even praises WordPress, our content manager of choice right at the beginning of the video. And if you need further proof that WordPress is the bomb, it’s the tool he uses for his blog (see link above)

Some tips Matt makes are some of the things we emphasize- like make sure you add descriptions of your audio or video content as text, because Google can’t index audio. (That’s what we’re doing here!) He talks about Googles other tools, like Google base, Google Maps, Google local, as well as tips on video- Google video longer for videos longer than 10 minutes, YouTube for 10 minutes or less (although we’ve got “Directors Status” and have loaded up 30 minute videos to YouTube). He also reminds smart web content creators to use Google ad words to generate alternate key words for your posts.Matt’s best advice to a budding site builder- use a really old browser, or a text only browser to see how a bot sees your site. Flash and Javascript make your site much harder or impossible to crawl. If you do insist on using Flash, use it as decoration, but leave the navigation in HTML.If you are in Dayton OH, and want to learn all the ins and outs of building the best site for Google rank, or, if you want a seminar on how to build an easy to use, effective website that can get you to the front page of Google, you can read up on Matt Cutts or you can take the Websitetology seminar which will give you the insight to get to the top, without having to buy ad words.