Monday, 6 October 2008

HOWTO: podcast a audio in blog

here we explore some new Flash MP3 players from Google and Yahoo!
that are again light-weight, easy to implement and extremely efficient.

1. Google Reader MP3 Player


Google Reader has an inbuilt MP3 player that is pretty much the same
as Gmail player but it also works on non-Google websites. This player
has volume controls, no Google branding and it auto-detects the
duration of the music file so your readers know how long the song will
last. Here’s a live example followed by the HTML embed code:



To use this MP3 player on your website or blog, copy-paste the
following code and replace the MP3_FILE_URL with the link to your MP3
file.


<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=MP3_FILE_URL"
width="400" height="27" allowscriptaccess="never" quality="best"
bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" />


2. Yahoo! MP3 Player


If you think normal is boring, check this out. Yahoo! offer a code generator (Easy Listener) to help you create a Flash based MP3 player that matches your website color theme and layout. See example:




Though this Easy Listener MP3 player requires you to pass the
address of the web page that contains the MP3 file(s), you can directly
pass the MP3 link and it will work just fine. Supports auto play and
you can decide where the meta data associated with the MP3 file should
be displayed.


<embed src="http://webjay.org/flash/dark_player" width="400" height="40" wmode="transparent" flashVars="playlist_url=MP3_FILE_URL&skin_color_1=-145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" />


3. Yahoo! Media Player


If you maintain an MP3 blog or run a podcast and regularly link to
MP3 files, it makes little sense to embed a separate Flash player with
every MP3 file. I would therefore recommend using the Yahoo! Media Player that auto-detects links to MP3 files in your web pages and creates an embedded player for each link.


All you have to do is insert the following link in your blog
template and all MP3 hyperlinks will be converted into inline MP3
players. This also has the shuffle feature and visitors can easily skip
to any song in the playlist. Excellent stuff.


<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>


4. Odeo MP3 Player


Odeo offers a pretty impressive MP3 player (see example)
that works perfect in web pages as well as RSS readers but a small
issue is that Odeo Player requires you to type the exact duration of
the song in the embed code. You can skip this step but then the
progress bar won’t reflect the true status when you play the
song. And there are no volume controls.




To use Odeo MP3 player in your website, add the following code replacing MP3_FILE_URL and DURATION with relevant values.

<embed src= "http://www.odeo.com/flash/audio_player_standard_gray.swf" quality="high" width="300" height="52" allowScriptAccess="always" wmode="transparent"  type="application/x-shockwave-flash" flashvars= "valid_sample_rate=true&external_url=[MP3 file address]" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed>


Summary: With so many choices, how do you pick the right MP3 player for your website ?

No comments:

My photo
London, United Kingdom
twitter.com/zhengxin

Facebook & Twitter