Xivanki Share !!: Add MP3 Files to Blogger - Part 3 - Embedding Audio Players

Add MP3 Files to Blogger - Part 3 - Embedding Audio Players - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Add MP3 Files to Blogger - Part 3 - Embedding Audio Players !! Semoga tulisan dengan kategori Blogger Media Files !! MP3 on Blogger !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Add MP3 Files to Blogger - Part 3 - Embedding Audio Players ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

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>