How to Add MP3 Files to Blogger Part-3
/
0 Comments
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.
I did some searching online and found the following Google gadget player calledniftyPlayer. 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:
<a href="http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3">Play Song</a>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js">
</script>
Play Song
<iframe title="Embed Music" width="300" height="45" scrolling="no" frameborder="0" id="1321430542" name="1321430542" allowtransparency="true" class="igm" src="//urlaacjrode9jse93p741t2n1ibbufaq-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/105629041657992777031/embed-music.xml&container=enterprise&view=default&lang=en&country=ALL&sanitize=0&v=6ced7fd38a9bccd&up_hide&up_loop=false&up_auto=false&up_bg&up_mime=audio/mpeg&up_url=http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3&libs=core:dynamic-height:idi&mid=144&parent=https://sites.google.com/site/mori79/html-gadgets/media-players#st=e%3DAIHE3cCkXTmVvxP0ZRAHEXp17OlOvBFg6Xw008LDGZSE%252F1fBKexUW%252BeMXTo%252FSYAabcN%252FtKDMOM8MqiEQfTIjSiO6W77yTW9QlA%252F%252Bz7Yl0dVKwOWuo5uu7TPbl%252FtDNjfh5HX0J%252FceG%252Fjn%26c%3Denterprise&rpctoken=1639199637196496882"></iframe>
<audio controls="controls">
<source src="http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3" type="audio/mpeg;codecs='mp3';" />
Your browser does not support this audio
</audio>
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.
Option 1 - Embedding a Google Gadget in Blogger
I did some searching online and found the following Google gadget player calledniftyPlayer. 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:
 | Gadgets powered by Google |
Option 2 - Using the Yahoo Embedded Media Player
Another option is to use the javascript media player provided by Yahoo. This works pretty well, however, I don't like the player on the left side of the window - plus, it seems to have trouble in Firefox. Just paste this code with your mp3 file where you want the player:<a href="http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3">Play Song</a>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js">
</script>
Play Song
Option 3 - 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 - copy and past this code if you like it (seems to work in all browsers):<iframe title="Embed Music" width="300" height="45" scrolling="no" frameborder="0" id="1321430542" name="1321430542" allowtransparency="true" class="igm" src="//urlaacjrode9jse93p741t2n1ibbufaq-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/105629041657992777031/embed-music.xml&container=enterprise&view=default&lang=en&country=ALL&sanitize=0&v=6ced7fd38a9bccd&up_hide&up_loop=false&up_auto=false&up_bg&up_mime=audio/mpeg&up_url=http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3&libs=core:dynamic-height:idi&mid=144&parent=https://sites.google.com/site/mori79/html-gadgets/media-players#st=e%3DAIHE3cCkXTmVvxP0ZRAHEXp17OlOvBFg6Xw008LDGZSE%252F1fBKexUW%252BeMXTo%252FSYAabcN%252FtKDMOM8MqiEQfTIjSiO6W77yTW9QlA%252F%252Bz7Yl0dVKwOWuo5uu7TPbl%252FtDNjfh5HX0J%252FceG%252Fjn%26c%3Denterprise&rpctoken=1639199637196496882"></iframe>
Option 4 - Wait for HTML5 Compatible Browsers
HTML5 was developed with multimedia in mind. Some of the newer browsers have the new <audio> tag that will, in the future, allow you to play media without a Flash player. However, this is still cross-domain scripting which may be blocked (does not work in Firefox yet):<audio controls="controls">
<source src="http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3" type="audio/mpeg;codecs='mp3';" />
Your browser does not support this audio
</audio>
