June 18th, 2010
One of these days browsers will be able to play audio files natively. You'll just be able to write an audio element in the HTML, point it at either an audio file, or a list of audio files, or an RSS feed containing audio files, and it'll display a smart looking audio player in the Web page.
This got a little bit nearer with HTML5, but Firefox 3.6 doesn't support MP3 files (which most people still use for audio files on the Web), just Ogg Vorbis. IE9, on the other hand, supports MP3 but not Ogg.
There is a jQuery plugin called jPlayer which goes part of the way to providing a cross-browser solution, but it's a very techie solution and not easy to configure.
So, until all of this gets sorted out finally, most of us just follow the path of least resistance and use a Flash-based audio player and accept that, because Steve Jobs is on a crusade to kill off Flash, no one browsing your pages on an iPhone or an iPad is going to see the player.
As I write this, in June 2010, the podcast pages I produce to accompany my podcasts use a Flash player that comes as part of the Blubrry PowerPress plugin for WordPress. And at the top of the sidebar on each page I use the Easylistener player. Here's a screenshot, just to remember it by, as it's only a matter of time before I have to remove it:
I periodically scour the internet for small, nice-looking audio players that can be pointed at an RSS feed, and Easylistener is the only one I've found that I really like.
William White describes the origins of Easylistener:
Easylistener was developed in the Yahoo! Media Innovation Group by William White and Joseph Magnani. It was inspired by the work of Fabricio Zuardi, Lucas Gonze and many other amazing and talented engineers working for Yahoo! Music in San Diego and Santa Monica, who were developing the Yahoo! Media Player.
Easylistener feeds off XSPF, a venerable XML format for playlists. The little chunk of code that places the player on your Web page includes a reference to a Web site that will take the URL of a Web page and will go and read that page, extract details of any audio files it finds and build them into XSPF that it then feeds back to the Easylistener Flash application.
The trouble is all of this was developed by Yahoo! and they provided the "playthispage" service that produced the XSPF for the player. But Yahoo! lost interest in (or never really noticed) Easylistener, so it was left to rot. Back in July of last year I blogged that the URL for the "playthispage" service no longer worked, which resulted in no content appearing in the player. After a while they seemed to have moved it to another server and I got the player working again. However, it recently stopped again, and this time I was sure it was dead for good.
I emailed William White, who had commented on my original blog post, and I asked if he could help. He got back to me to say he'd set up a PHP script that provided the same XSPF generation service. As a result, for the time being, the player is working again.
To get it working again I added:
playthispage_url =http://musiclibre.org/playthispage/?url=
to the
flashVars attribute within the
embed element.
So my embed element now looks like this (note: the flashVars value should be one long string, I've broken it into lines here just for good looks):
<p style="margin-left:-10px; margin-top:0">
<embed src='http://l.yimg.com/us.yimg.com/i/mig/playlistbadge/25.swf?referer='
width='170'
height='200'
wmode='transparent'
flashVars='playlist_url=http://www.itauthor.com/category/podcasts/feed&
playthispage_url=http://musiclibre.org/playthispage/?url=&
rounded_corner=1&skin_color_1=0,-100,-29,18&skin_color_2=0,-100,-27,20'
type='application/x-shockwave-flash'
pluginspage='http://www.adobe.com/go/getflashplayer'
/>
</p>
However, if you want to use Easylistener to your own Web pages, the easy way to get it is to go to:
http://www.musiclibre.org/easylistener/
There's a nice little Web application there for setting the page that gets scraped for content and choosing the way you want the player to look. You then just copy the embed code and change "http://webjay.org/flash/xspf_player" to either "http://musiclibre.org/xspf_player" or "http://musiclibre.org/dark_player".
For example, here's one I just went and grabbed.
And if you don't see anything (or the player is empty), it means it's broken again.
Such a shame Yahoo! didn't continue supporting this because it's still way better than anything else out there that tries to do the same thing.
Potentially similar posts
June 19th, 2010 at 10:56 pm (#)
Documentation Engineer, Documentation Specialist, and Information Developer are three titles I had before going freelance.
June 20th, 2010 at 2:33 am (#)
We, indeed, are well loved, then! :) At my company, we traditionally report up through the software development organizations. As such, we are called the Information Development teams. We go by "InfoDev." We have Information Developers, as well as Senior, Principal and Senior Principal Information Developers.