Sunday, October 3, 2010

How to Embed Podcast on Blogger

With great delight and excitement, I'm gonna share this tutorial with ya'll today. I think it's only fair that I should give credit for WordPress developers who invented this audio player plugin, currently not available in Blogger. So here we go.


Embedded MP3 Audio Player

This tutorial uses the Audio Player WordPress plugin from 1pixelout (by Martin Laine). Please download the .zip file from that site. You will need to unzip the files and use two of them:
  • player.swf (this is the audio player)
  • audio-player.js (this is the JavaScript)
The instructions below concern using that player on non-WordPress HTML pages.
You must have some Web space that you control (that is, server space) to which you will upload these files as well as your audio files.

Sample Podcast:


If you are using Internet Explorer, you will probably need to click the player twice to make it play. (All other Web browsers will let you click once.) If you do not see the MP3 player, then you don't have the Flash player installed. (More than 90 percent of all Internet users do have it.)

Tutorial after the jump.

Tutorial

For this tutorial, let's imagine that your server space is at this URL: www.fakedomain.com/myname/
  1. Create a new folder on your Web server and name it "audio"
  2. Upload the two files for the audio player (player.swf and audio-player.js) to the audio folder.
  3. Upload an MP3 file to the audio folder. For this tutorial, let's assume your file is named music.mp3. (NOTE: The MP3 file must be encoded at 44.1 kHz, or 22.05 kHz; any other sampling rate will result in the "chipmunk effect," which you really would not like.)
Now that your three files are uploaded, they reside at these URLs:
  • http://www.fakedomain.com/myname/audio/player.swf
  • http://www.fakedomain.com/myname/audio/audio-player.js
  • http://www.fakedomain.com/myname/audio/music.mp3
The next step is to place the HTML for this player on the Web page where you want it to appear. Change the URLs shown below to match your own URLs.


<script language="JavaScript" src="http://www.fakedomain.com/myname/audio/audio-player.js"></script>


<object type="application/x-shockwave-flash" data="http://www.fakedomain.com/myname/audio/player.swf" id="audioplayer1" height="24" width="290">

<param name="movie" value="http://www.fakedomain.com/myname/audio/player.swf">


<param name="FlashVars" value="playerID=audioplayer1&soundFile=http://www.fakedomain.com/myname/audio/music.mp3">

<param name="quality" value="high">

<param name="menu" value="false">


<param name="wmode" value="transparent">

</object>


If You Use Blogger

To use this player with a blog hosted at Blogger, take out all the code above the
<object> tag and place it in your Blogger template (instead). In the Blogger
template, place it above the </head> tag, as shown:

<script language="JavaScript" src="http://www.fakedomain.com/myname/audio/audio-player.js"></script>

</head>
Then each time you use the player in a blog post, you will paste only the
<object> code into your blog post.

Using More Than One Audio File

You can simply upload additional audio files to the same "audio" folder on
your Web server. Make sure each file has a unique filename.
You do not need to upload the two files for the audio player (player.swf and audio-player.js)
more than once.

Placing More Than One Player on the Same Page

For a second player on a page, use this HTML:

<object type="application/x-shockwave-flash" data="http://www.fakedomain.com/myname/audio/player.swf" id="audioplayer2" height="24" width="290">

<param name="movie" value="http://www.fakedomain.com/myname/audio/player.swf">


<param name="FlashVars" value="playerID=audioplayer2&soundFile=http://www.fakedomain.com/myname/audio/other.mp3">

<param name="quality" value="high">

<param name="menu" value="false">


<param name="wmode" value="transparent">

</object>
For a third player on the same page, change "audioplayer2" (BOTH of them!!) to "audioplayer3" in the HTML. For a fourth player, "audioplayer4," etc., etc.

Courtesy

This tutorial is provided free of charge by Mindy McAdams. Please visit my blog, Teaching Online Journalism. This tutorial is provided for your use without warranty or support. Copies are permitted only under the conditions of this Creative Commons license.

5 mackerels:

Lopsided Oreo said...

thanks ! pretty helpful and informative !

Lee Collins said...

Thank you for a great tutorial. It works like a charm. Any ideas on how to make the title of the track appear in the player like yours does? I assume that it picks up the ID3 title tag, but mine don't show up.

Lauraine said...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
html5 player| html5 video player

HTML5 Player said...

cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well.. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, html5 music player

swf to html5 converter said...

Thank you for the thoughtful review. The main advantage of html5 player seems to be for embedding rich media such as audio and video in modern browsers. Although, the structure elements seem to be useful. CSS3 seems to be headed in the right direction, leaving many possibilities for implementation and creativity,

Post a Comment