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 - There seems to be a significant amount of variation and change in Google, HTML5 and cross-browser components working with each other. Please keep coming back to this page for more info.

Option 1 - Embedding a Google Gadget in Blogger

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.

As you can see I've added the script for niftyPlayer - there are formatting options within the script parameters. You can set the background color, the border. To do that just set these values -

up_wmode=opaque
up_bgcolor=%23RRGGBB (where RRGGBB is your background color)
To turn off the border set border=%23ffffff%7C0px%2C0px+....

Once you've set the parameters, place this code in your post as HTML where you want it:

<div>
<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/101762205312958577209/nplayer17_0.xml&up_file=http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3?attredirects%3D0&up_wmode=transparent&up_bgcolor=%23ffffff&up_as=0&synd=open&w=365&h=37&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
</div>

This seems to work in all browsers (IE, Firefox, Chrome). NOTE: this does not work on iOS devices such as iPhones and iPads due to not having Flash. I would suggest offering two players if you need iOS. Hopefully, your security settings should allow this to be visible here:

Option 2 - Using an IFrame of a Google Site Widget

With Google Sites users were allowed to create widgets for various functions. Fortunately, an industrious person developed this iframe plug-in. This is one of the few options that works better with browser security because the frame is a window within a window - find and insert the Dewplayer on your Sites page, then copy and past the code from your Google Sites page to your Blogger page (seems to work in all browsers that support Flash - again, no support for Apple devices with iOS):

<iframe title="Dewplayer Flash Reader Play a MP3 File. Simple version" width="230" height="30" scrolling="no" frameborder="0" id="958235194" name="958235194" allowtransparency="true" class="igm" src="//lebieajorgsoma1tjb9gqldu4ngb3234-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/dewplayer.xml&container=enterprise&view=default&lang=en&country=ALL&sanitize=0&v=558cf4fc6b61d019&up_CCOL=%23d1dae3&up_START=No&up_MP3=http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3&up_LOOP=No&libs=core:flash&mid=141&parent=https://sites.google.com/a/bloggertipspro.com/media/home#st=e%3DAIHE3cAiWoy4d7IhHEfvRZwjlcKQV5pwEXh0KyP5rC%252FmQISxcVPCcsfmQs2BN%252BGECw0pVEqCkjNuqwBXovF%252FCL05RgFIvlIZM%252FW4%252FQdQQPI4%252BRLeXlK8p8GXCNJIZHfzrYVLv0XiOL8e%26c%3Denterprise&rpctoken=2892288207985648625"></iframe>

Option 3 - Wait for HTML5 Compatible Browsers (note: works in Blogspot domains but not in custom domains)

HTML5 was developed with multimedia in mind. All of the newer browsers have the new <audio> tag that will allow you to play media without a Flash player. However, this is still cross-domain scripting which will be blocked for custom domain names on some operating systems or devices (for example, I cannot get this player to work on the iPad for my custom domain bloggertipspro.com - but, in my test blog templatedebug.blogspot.com it works fine on everything.

Nevertheless, if you are using Blogger blogs with the standard [blogname].blogspot.com the HTML5 player works great on all devices including iPhones and iPads if you followed my instructions in Parts 1 and 2:

<audio controls="" src="http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3">
Your browser does not support this audio
</audio>

Posted By my pwiki7:42 PM

0

Continue Reading

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!!!

Posted By my pwiki6:58 PM

0

Continue Reading

Add MP3 Files to Blogger - Part 1

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!

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.


The first thing you're going to want to look for is the Google Sites menu item. It is a bit hidden under the More menu selection as shown here:

Simply go ahead and choose 'Sites' to get started. You're really not going to use the site builder to build a full website at this point (though you could if wanted), just utilizing some of the storage functionality that Google provides with this tool.

Select the menu button 'CREATE' to make a background site for your Blogger blog:

This will lead you to the next page that will allow you to name your site and associated themes if you want. The key at this point is to just use the default 'Blank Template' that is preselected. I like to use the name 'media' or 'mediafiles' if my goal is to have Blogger use MP3 music or podcasts:

Go ahead and press 'CREATE' to have Sites kick off the website build. In a second or two you should see something like this which is the left pane of the newly created website:

You now have the website shell ready to land your MP3 files. But, the default pages are only static ones at this point without any ability to upload or store files. For the last phase of this Part 1 you need to create a certain type of webpage called a 'File Cabinet'.

Creating the Blogger MP3 File Cabinet

The next step is adding a web page to your site. Go up to the far right menu item in Sites and select the 'New page (c)' icon button:

You'll be prompted with a page setup dialog that will need to 'Name your page:' and set the page type like so - be sure to use the numbered order to setup the page correctly. I prefer to create a File Cabinet page called mp3 to set the file types. You can call it whatever makes sense to you:

Go ahead and press 'CREATE' to build the new webpage. Your site should return looking something like this:

You've now created the needed shell to get your MP3 files to some free storage from Blogger. Before you start working with this site, however, you need to follow one last step - setting the visibility of the webpages to be Public.

In this upper right menu choose the 'More' dropdown button to select the 'Sharing and Permissions' option:

Once you've selected it, you'll be in the Manage Site section. You'll want to select the visibility permission to allow these pages to be fully 'Public on the web' like so:

Done!! You're now ready to start using Google Sites for your Blogger MP3 files! Since this is only Part 1 please note this is not the final step of the process. You're going to need to do a couple of tricks in Blogger to start using this site. Don't worry -- it is an easy process. Take some time to learn Google Sites (Mary Fran's Getting Started with Google Sites is a good tutorial) some more so you're comfortable with navigating through it.

Next up - Creating and Uploading your MP3 files to Google Sites for use on Blogger.

Posted By my pwiki6:42 PM

0

Continue Reading