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.

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

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="50" 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 - Use HTML5 Controls with Google Sites

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 may 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 blogspot blogs 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>

Option 4 - Use HTML5 Controls with Dropbox (Draft Nov 2018 - testing working prototype)

If you made it this far it seems that you can play directly from Dropbox now. The key is to upload your MP3 file to any Dropbox folder and click the "Share"button - setting the sharing to "Anyone with the link can view this file" and then "Copy Link" for the file. However, you need to alter the shared URL final parameter from 'dl=0' to 'raw=1'  This is experimental at the time of writing (Fall 2018) and bypasses all of the work you may have done in Steps 1 and 2 but there is no guarantee it will work. I would like to hear how this may have worked for you:

<audio controls="" src="https://www.dropbox.com/s/ofoqck6zjjefxkc/Future%20Gladiator.mp3?raw=1" type="audio/mpeg">
Your browser does not support this audio
</audio>