Add MP3 Files to Blogger - Part 3 - Embedding Audio Players

Brandon Zierer (Creative Commons)

In Part 1 and Part 2 of Adding MP3 Files to Blogger we walked through creating a free storage location for the MP3 files and uploading them to be visible publicly. The next step is finding the right embedded player to best work with Blogger.

One thing you need to be concerned with is cross-domain scripting security with this configuration. Since Blogger is attempting to call the MP3 files on a Google Sites domain you'll find that many companies or browser defaults will not allow this configuration. For example, this domain is bloggertipspro.com and the MP3 sample is located at sites.google.com (or google.com). Many security configurations don't like this since external domains can be untrusted from the original domain.

Until Google allows files uploaded directly to Blogger you'll have to live with this limitation. In these examples you may or may not see or hear the audio samples depending on where you are accessing this web page.

NOTE: Dec 2014 and Nov 2018 - There seems to be a significant amount of variation and change in Google, HTML5 and cross-browser components working with each other. Please use only Options 3 or 4 now -- it is the only viable way using HTML5.

Option 1 - Embedding a Google Gadget in Blogger - Deprecated

I did some searching online and found the following Google gadget player called niftyPlayer. The key to using niftyPlayer is to link to the gadget site and then to your same Google Sites MP3 gmodules page as you did with your files in Part 2.

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:

Add MP3 Files to Blogger - Part 1

NEWS NOTE: Be aware that Google Sites modernized in 2017 so using it as storage for your files may change. You may jump to Part 3 and look at options 3 or 4 to use Google Drive or Dropbox instead. Dropbox seems the most promising in 2019.

One nagging theme that consistently bothers Blogger users is the lack of storage available for file types other than images and videos when attempting to expand your blog. I don't know how many times I've seen users asking for upload storage for PowerPoint slides, PDF files, databases, etc. Probably the single most popular request is "how can I upload a MP3 file to Blogger and embed it in a flash player?" without some odd widget or custom call-out.

The reason why the MP3 request is called out so often is mainly due to the desire to have either music or podcasts directly embedded in your posts.

What many Blogger users don't realize is that by registering as a Google user, you have many of their tools at your disposal--including the not so obvious ability to utilize free Google storage (which translates directly to the ability to upload MP3 files).

Now, uploading a MP3 file to Blogger is not a direct upload through the Blogger interface but is very easy with just a few steps to get you there quickly. So, let's get started!!

Creating a Google Site for MP3 Storage

So, just what is a Google Site? Sites is a free website building tool that Google picked up as an acquisition some years back. It is not overly popular but does have some interesting capabilities. You can use it as a standalone tools to build full, mostly static websites without any hosting fees. In our case we're only using it as a background placeholder.