Using 1 Pixel Out's Wordpress Audio Player In Blogger

While searching for a free solution for hosting some demo clips in my composition portfolio, I found 1 Pixel Out's flash audio player below to be a lightweight and customizable solution.



To get everything working we will need a place to host our flash player and its associated JavaScript. For this tutorial we will be incorporating Google Apps' Web Pages as a files host.

First, you will need to download a copy of the audio player from 1 Pixel Out:
http://www.1pixelout.net/code/audio-player-wordpress-plugin/

Then extract the zip file and locate audio-player.js and player.swf:



Then upload the files to your Web Pages files:



Now we are ready to add code to our Blog's template and to our posts. First link to the audio player's JavaScript file in by placing the following line of code just before </head> in your blog's template HTML:

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

Now, for enabling the player in a blog post, put the following object HTML code in your post. If you plan on posting many audio clips as I plan to do, put the code into your post template as well:

<object type="application/x-shockwave-flash" data="http://yourpagesURL.com/player.swf" id="audioplayer1" height="24" width="290">
 <param name="movie" value="http://yourpagesURL.com/player.swf">
 <param name="FlashVars" value="playerID=1&amp;soundFile=http://yourpagesURL.com/file.mp3">
 <param name="quality" value="high">
 <param name="menu" value="false">
 <param name="wmode" value="transparent">
</object>

Be sure to replace all the bold yourpageURL's in the codes above with your actual pages URL.