How To Embed Podcast With Free Audio Player

Posted in howto, product-reviews, webvideo


Make Crisp Clear Video Others Envy!
OR
We Make Them For You...Plus More!

« Creating Tabbed Contents For Blogs With Free JavaScript  |  How To Easily Create Vertical JavaScript Accordion »

   

Talking things over is something we do each passing day. From trivial problem to monumental understanding to subtle exchange of feeling – there is always some talk that conveys sense and meaning to one another.

The coming of podcast as a popular tool has livened up Internet marketing. In many cases podcast could achieve what plain texts couldn’t simply because people liked the appeal of human voice.

It would therefore seem that audio podcast will take its rightful place as the primary medium of Internet marketing. In practice though the expectations look like falling short of actual happenings.

The reason may be that creating a podcast is a daunting task for many small website owners. If that indeed is true, and you are one of them in awe of ‘technological marvel’ that podcast is, rest assured that this is not so.

If your computer can record and play sound, then podcasting is really easy. The 2 essential elements of podcasting – recording voice and embedding it in a webpage – can be done with freely available software and anyone can do that.

In 2WebVideo’s course on making training video an entire module is devoted to the teaching of audio recording, editing, mixing 2 or more audio tracks, leveling the different sounds, and finally converting all of the tracks into a single audio podcast ready for embedding in any webpage.

In this video article I’ll take up the embedding part of podcasting, and show you 3 ways of doing that easily in any webpage. Also check out the article on how to embed podcast player in WordPress blog of yours.

In the example below, the podcast I’m going to embed is actually a small piece of music I’ve composed and converted to MP3 format.

As you use the code for embedding audio podcast I’ll request you to leave comments about the music I’ve composed (thanks in advance! :) )

 

Google Audio Player

The Google audio player to embed podcast is given below. Click the start button and you can hear the music. The code to do a similar embedding comes after that.

 

 

<object height=”26″ classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″ width=”350″><param name=”wmode” value=”transparent”></param><param name=”flashvars” value=”playerMode=embedded” /><param name=”src” value=”http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.yoursite.com/your-podcast.mp3″ /><embed src=”http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.yoursite.com/your-podcast.mp3″ type=”application/x-shockwave-flash” wmode=”transparent” height=”26″ flashvars=”playerMode=embedded” width=”350″></embed></object>

 

Notice the code above. It’s a flash player, and the all-important piece of code to run the player is the source file (src=”..”).

The Google audio player has start/pause button as well as volume control. It’s pretty neat. You cannot however change the color of the player. The forward and back buttons jump 5 seconds either side when clicked on.

 

 

delicious Playtagger

In contrast to the 2 players discussed in this article, the delicious Playtagger is remarkably easy to use, but does not have their functionalities. Playtagger is however very similar to Yahoo Media Player.

The code is very simple. It’s just a JavaScript (below) that you place in the page html before you hyperlink page text to your MP3 file.

<script type=”text/javascript” src=”http://static.delicious.com/js/playtagger.js”></script>

And now the code below is how you link to the music file. Remember you can turn any piece of text into a hyperlink for the music. [Example: My Music]. Click the buttons to hear the music.

<a href=”http://www.yoursite.com/your-podcast.mp3″>My Music</a>
Note if you see 2 start buttons above it’s because I’ve included JavaScript of both Yahoo Media Player (coming below; grey button) and delicious Playtagger (blue button). It is also likely that you see just one button – either media player or Playtagger. This happens when the 2 JavaScripts clash and only one is shown.

 

Yahoo Media Player

The Yahoo Media Player is an altogether different type. It is both easy and clumsy at the same time.

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

It is easy because you only need a small JavaScript (above) to be there before you turn any text into a hyperlink with a play button. This can be anywhere on the page and even within a context, like My Music (My Music). Code is similar to Playtagger:

<a style=”text-decoration:none;” href=”http://mediaplayer.yahoo.com/your-podcast.mp3″>My Music</a>

The player turns clumsy – that’s my opinion – as you click on the play button. A separate player floats up at the bottom having same – rather more – functionalities as the Google player.

It is sudden and may take you by surprise. Also the player looks dull. But then the player can be clicked off to one side of the bottom screen which is an advantage.

If these are okay with you then Yahoo Media Player can be a better option because you can run an audio playlist with it. Remember though that the player will refer to the audio files only if they are already linked somewhere on the page.

Check out each player as much as you want. They are free and so no harm in trying them out to your heart’s content.

 

Update

October 20,2010
Paul Wheatcraft of ‘www.medicalteams.org’ pointed out about the Google audio player not functioning. On probing I found that the URL of the player has changed. The correction is done above. Thanks Paul.

October 22,2010
Changed the embed code for Google Audio Player as above.

Get the latest top web marketing tips! 'Like 2WebVideo' now on Facebook below!

This article of October 28th, 2009 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.

4 Comments

  1. Hi, goto http://www.123mp3download.com and search the music, click on listen and embed the code. Its easy.

  2. As I learned the hard way – you have to always check your code out on all the popular versions of browsers. There was an issue with the Google player where it worked fine EXCEPT with IE8. Partha was very responsive to my question and sent me revised embed code to work with IE 8. He also pointed me to a nice player to use with a playlist of podcasts.

    Great service!

    Thanks Partha!

    • Thanks Paul for your nice comments.

  3. Vi ringrazio, considero che quello che ho letto sia ottimo

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>