Add MP3 Files to Blogger - Part 2

NEWS NOTE: July 1st  - Here we go again - Last month Google removed their shared media player! There were many Bloggers and Webmasters on the Google forums complaining. It looks like a casualty of the shutdown of Google Reader. However, I have found other solutions to the free MP3 player issue - in Part 3 if you want a different option!

In Part 1 I talked about creating a Google Site to host your MP3 files. The next step is to get you media files ready and uploaded so you can use an embedded player to use in a widget or within a post.

Uploading MP3 Files to Google Sites

If you've left your Google Site since the last tutorial, go back and log into Sites again. You should see the default Sites screen with the new 'mediafiles' site ready from Part 1:

Go ahead the click on the 'mediafiles' site to get to the pages within--you will open a new window defaulting to the Home page like so:

Your custom file uploading page (called mp3 here) is ready for your files. Go ahead and select the mp3 page title in the left menu above to get the to files page where you can start the uploads. The small 'Add files' button is located near the middle of the page as circled below. This is where you can select the files you want to upload:

When you select the files you should see the upload dialog box:

Continue repeating this step to upload all of the files you need. Take care, however. Google does have a storage limit on Sites of only 100MB per site and only 20MB per file. So, if you're uploading music, that limits you to about 25 songs. For podcasts take care to reduce your audio bit rate to get more efficiency in storage. I'm sure you could create more sites to raise that limit but I haven't tried it personally.

Here's what your mp3 site page should look like now:

The mp3 file I added was from a Royalty Free music website. However, in order to use the file I have to give the artist create like this:

• Future Gladiator Kevin MacLeod (incompetech.com) Licensed under Creative Commons "Attribution 3.0" http://creativecommons.org/licenses/by/3.0/

Since the Google Sites page is public, you might want to consider what type of license is needed for the mp3 files you are uploading. Be sure to give the artist or podcast credit both on your Blogger site as well as your Google site if required by the license. I added the very same credit in the comments of the Google site too.

Embedding an Audio Player in Blogger

The final step in this entire process is to find an audio player that you can utilize to actually stream the MP3 data to your users. Typically this is done using an Adobe Flash/Shockwave player. The player just needs to be embedded as code in an HTML widget or directly in a Blogger blog post.

At one time Google provided a Flash audio player directly from their Google Reader site. As of July 2013 - this was removed much to the dismay of many bloggers. They may or may not add this back. I'm going to leave this section within this post for now in case Google decides to add their player back. The best guess out there right now is that Google is migrating much of their Reader functionality to Google Play - their new multi-media site. Please use Part 3 for now.

Luck has it that Google has just the code you need! As part of the Google Reader application, there is a player widget you can reference directly from other Google tools. Important note, however: I haven't found any specific wording that Google sanctions this from Blogger. But, many people do it and I doubt that Google would pull the plug on the widget for its use in Reader.

Given that, here is the widget code you need to copy and paste:

<embed
flashvars="audioUrl=your-google-sites-link-here"
height="27"
pluginspage="http://www.macromedia.com/go/getflashplayer"
quality="best"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf" type="application/x-shockwave-flash"
width="400"
wmode="transparent">
</embed>

Note that the part that says 'your-google-sites-link-here' needs to be the full URL of your Google Site MP3 file. The easiest way to get to this is to right-click on the small, down-arrow located next to the file on the far bottom right of your file page:

Once you right-click on it, you should see a menu item that says 'Copy Link Location'. Go ahead and choose that to paste into your copied code above like so:

<embed
flashvars="audioUrl=http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3"
height="27"
pluginspage="http://www.macromedia.com/go/getflashplayer"
quality="best"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf" type="application/x-shockwave-flash"
width="400"
wmode="transparent">
</embed>

If you take a close look at my URL you'll see that I removed the 's' from the https in the link. Google Sites uses a secure http connection by default. However, since we made the page public you can alter the 'https' to 'http'. I also removed the extended attributes on the link '?attredirects=0&d=1' although this doesn't really matter--it play either way.

And finally, here is the actual example embedded into this post! The file is fairly large so you might get a few second delay before it plays. Enjoy!!!