This is a quick tutorial on how to embed a small flash mp3 player into a Blogger post.

We will use Google Sites to host all of the files (flash, javascript, & mp3) for this project, you can find out more, on how to host files for free from my previous post Blogger - Host Javascript File for Free

1) The first thing we need to do is visit 1pixelout.net & download the audio-player.zip file that includes all the necessary files.

2) Unzip the audio-player.zip file that you downloaded from 1pixelout.net

3) we need two files from the audio-player folder

• audio-player.js
• player.swf

4) We need to rename audio-player.js as a text file to be hosted on Google Sites, since Google Sites won’t allow us to host javascript files, again you can learn how that’s done by reading this post. So our audio-player.js should now look like this example: audio-player.txt (notice the .txt extension)

5) Upload both the audio-player.txt & player.swf to your own Google Sites webpage. The Url’s should look similar to the links below:

• audio-player.txt = http://sites.google.com/site/YourSiteName/mp3player/audio-player.txt
• player.swf = http://sites.google.com/site/YourSiteName/mp3player/player.swf

6) Go to your Blogger Account –> Layout –> Edit HTML, & then make sure the Expand Widget Templates checkbox is checked.

7) Find the </head> html tag, in your template, & past this code one line above it (remember to replace the http://sites.google.com/site/YourSiteName/mp3player/audio-player.txt link to your URL, on your Google Site, & also press the SAVE button below the Blogger Template editor:

<script language="JavaScript" src="http://sites.google.com/site/YourSiteName/mp3player/audio-player.txt"></script>

8) Ok the hard part is finished :), now each time we want to add a Mp3 to a Blogger blog post, we just need to add the code below, don’t forget to change the URL/links to your own links, & also change the actual Mp3 to your own mp3 that you host on your own Google Sites webpage for free:

(Download Mp3 Code Sample)

Anytime you want to add more than one Mp3 to a webpage you need to make sure to change the “Object Id” so that you won’t have any conflicts between each mp3 player, example audioplayer2 & playerID=2 the player name can actually be named anything you would like to name it, it’s just easier to add a number at the end of each name. :)Here is the finished mp3 player in action

Credit goes to http://www.1pixelout.net/code/audio-player-wordpress-plugin/ & http://www.macloo.com/