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.