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

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

50 comments:
  1. Thanks for this. On 10/31/2012, the Yahoo Media Player is no longer playing nicely with Google Sites-hosted files on Firefox & Chrome/Mac OS 10.5.8 (Safari is OK) - they get stuck in buffering until they time out. I read that the issue has something to do with redirects. Kiwi6.com's player works well on Blogger and files hosted there also work in the Yahoo Player in all three browsers. With luck, Kiwi6 will be around for awhile.

    ReplyDelete
  2. Thanks so much for preparing such a comprehensive and easy to follow explanation of the options! I was able to go right from your descriptions and try out the various possibilities until I found the one that worked best for me, which turned out to be Google Sites and the Google media player. Thanks, with much gratitude and respect!

    ReplyDelete
  3. Easily one of the best tutorials on incorporating mp3 files & music players into the blogger platform. Many thanks!

    Have you any guidance on creating non-flash/HTML players that use mp3 files located on Google Sites and are playable on iPhones & iPads as well?

    ReplyDelete
    Replies
    1. Hi,

      My assumption would be that iOS devices like iPhones and iPads are HTML5 compatible. So, Option 4 should work which be a purt HTML5 solution. I don't have an iPad to validate it, however.

      - Don

      Delete
  4. OK, so I've managed - many MANY thanks to you - to use Option 2 on my Blogger blog, connecting it to my fileden site instead of a Google Sites site. I can confirm that it works on my iPad, yay. It also works on my husband's Mac who uses OS 10.8.2, whereas previously the audio files I used would download but not play.

    Now.

    It there, by any chance, a way to make this display the way it did before, when I used the Google Link function? I liked it that people reading a post would see, within the text, a song title displaying as a link and just click on this and hear it.

    Anyway, again, many thanks for sharing this.

    ReplyDelete
  5. OK, so I found the answer to my own previous question, for Option 2. Same question for Option 3. People around me have disabled Java because of the recent scares and are wary about enabling it back.

    ReplyDelete
  6. Thank you so much! This has saved a problem I've had for a long time. http://thwlanguages.blogspot.co.uk/

    ReplyDelete
  7. I am glad to have found your blog as I wanted to upload just audio so THANKS!!!

    ReplyDelete
  8. Hello,

    Is there a way to embed an mp3 playlist to a blog using one of these options?

    ReplyDelete
  9. Sorry...I should have specified. Is there a way to embed an HTML5 playlist? Also, how would I change the size of the playlist to fit into a blogger sidebar?

    Thanks.

    ReplyDelete
  10. Any way to change the white background color of the Quicktime Iframe code?

    ReplyDelete
    Replies
    1. Unfortunately, no there isn't. IFrames will show the background of the source not the page you've embedded it on. However, if you set the height value to 16, that will remove any white space around the bar.

      Hope that helps.

      - Don

      Delete
  11. thank you for sharing such nice infoto us. i like it its very informative one keep sharing this type of information to keep in touch with the people. its really helpful for the reader and useful technology. i like your post its very informative and very awesome. keep providing such kinds of good blog.

    ReplyDelete
  12. Ah! Thanks so much!

    It took me a bit but I finally go the iframe one to work! Just copying the link location and putting it in the code adds extra words at the end that aren't needed. (https://sites.google.com/site/mediabitsandpieces/home/100-01/100.03.wav?attredirects=0&d=1) The "?attredirects=0&d=1" part made it so it wouldn't work at first!

    Great tutorial, very helpful!

    Sam

    ReplyDelete
  13. Fantastic step by step instructions! Did it easily! Thanks so much!

    ReplyDelete
  14. Thanks for this! Been wondering why all my embeds went away, and this is the only site I could find out why, and with what to replace them with!

    ReplyDelete
  15. Thank you so very much... it helped a lot
    You can view what i did at http://odofamous.blogspot.com/2013/10/a-little-flash-back-on-casy-os-track.html

    Thanks once more!!!

    ReplyDelete
    Replies
    1. Hi Odogwu!

      Glad it worked out for you!

      - Don

      Delete
  16. Very helpful! Thanks for the extensive guide!

    I hope the HTML5 solution really is worthwhile. I wouldn't want my audio to be inaccessible to many people. I'm going to try it in my blog, anyways, just because it seems reliable.

    Cheers!

    www.AssafKoss.com

    ReplyDelete
  17. Hi Don,

    Thanks for what is a very clear step-by-step guide that even a fool like me can make sense of. However...I got as far as copying the URL of my mp3, so that I could paste it into one of the gadget players' HTML codes (I'm not experienced with any of this stuff, BTW)...And on my google site 'mediafiles' mp3 page there is nowhere to access the mp3's URL. Not any longer. All I could think of was to hover over 'download' and type/copy the URL from the bottom of my screen. Which, once pasted into the HTML, didn't work. I'll try another gadget, but is that the right URL?* If not, what URL do I want and how do I get it?

    * I have: https://sites.google.com/site/malcolmmmedia/mp3?attreadirects=0&d-1

    Thanks,
    Malcolm

    ReplyDelete
    Replies
    1. Hi Malcolm,

      It should just be something like this:

      https://sites.google.com/site/malcolmmmedia/mp3/Whats%20Going%20On.mp3

      I think that will work with option #1. Let me know!

      - Don

      Delete
  18. Okay sorry for all of the comments LOL! I finally figured it out and got the option 1 to work. Now I am just trying to get it to autoplay. Here is my code that I add to Option 1, and it works on my page.

    https://sites.google.com/site/mediafilestr/mp3/Let%20Her%20Go.mp3?attredirects=0&d=1

    Could you correct it to where it will autoplay for me!? Last time I'll comment I promise haha! Thank you so much for these awesome tutorials. It must be nice to be so good at html, etc.

    ReplyDelete
    Replies
    1. Hi Tiffany,

      Just got through your comments - so glad you have it working! I haven't tried the auto start for option 1 - but, from the reference you append this - &as=1 - just after your mp3 file link like so ( you can remove the attredirects=0&d=1 ):

      https://sites.google.com/site/mediafilestr/mp3/Let%20Her%20Go.mp3&as=1

      as means auto-start. Let me know if that works for you!

      - Don

      Delete
  19. I'm pretty confused on how to make it autostart. You lost me haha! =/

    ReplyDelete
    Replies
    1. Tiffany,

      Did you ever get the autostart to work?

      Don

      Delete
  20. i have tried first one and its playing your selected song. please tell me how can i can play my selected song...

    ReplyDelete
    Replies
    1. Hi Mohammad,

      All you need to do is to swap out the full URL link to my MP3 file with yours that you setup in Part 1 and Part 2 of this tutorial. Those parts show you how to upload your file and file the link to replace.

      Hope that helps!

      Don

      Delete
    2. I tried it (Option 1), followed every step in careful detail, but all I get is an empty rectangle with a Google logo underneath it to the left and the phrase, "Gadgets powered by Google" to the right. There's no sound, there's no player, there's only an empty rectangle. I tried Option 3 and did not even get that much. Did not want to bother with the Yahoo method. Is there something in Blogger itself which must be set apart from placing the HTML code in the page?

      Delete
  21. I am trying to start Podcasting. I am struggling and would love some help. I have a blog on blogger, and I now have installed a google gadget mp3 player on it. I also opened a site on google sites. I uploaded an mp3 file that I want to use as a test run for my first podcast. I can't get the mp3 on the google site to play in the widget on my blog, and I don't know how on earth all of this will connect to form a podcast. What am I missing, and what can I do to change that?

    ReplyDelete
    Replies
    1. Gerrit,

      Did you install the niftyPlayer in Option 1 above? Also, did you follow Part 1 to set your MP3 files to Public on Google Sites? The Google player from Part 2 doesn't work.

      Let me know where you're at.

      Don

      Delete
    2. Gerrit,

      I see you're using a different widget than the ones I've suggested - so, I'm not sure how to help you on that. Try Option 1 in this Part 3 and see if it works.

      - Don

      Delete
    3. Option 4 is working for me as of today. That seems to be the easiest of all options and the "controls" are simplicity itself. I have it looping, displaying the controls and Auto-playing.

      Delete
  22. I used option 4 and it worked great on both web browsers and my iPad...then I needed to edit my mp3 file, so I uploaded it again, using the option 4 code again, but this time, it didn't work on my iPad, but still works on Chrome. Is there something I may have accidentally done to cause this problem? Thanks!

    ReplyDelete
  23. Hi there,

    I tried option one with everything set up the same way, but the player doesn't show up on my blog. Could it be that I am using an educational account that is closed within our community? My sharing settings are slightly different.

    Thanks!

    m

    ReplyDelete
    Replies
    1. That's possible - some organizations block links for streaming. For example, my company does not allow it so most mp3 streams are blocked.

      Delete
  24. Thanks so much for the html codes. I've been using option #4 and it's been working well for the most part, but as I commented above, it doesn't work on mobile devices without flash like an iPad, even though I though it was supposed to be able to. Did I misunderstand, or am I doing something wrong? Any advice would be great; thanks!

    ReplyDelete
  25. Don, consider me befuddled. I'm a Blogger newb and I got as far as setting up Sites and my mp3 files. After that I'm lost. I'd like to use option one but get lost in the html and how to get anything to appear on my blog. I guess I need a pre tutorial on scripting and then embedding the html. HELP

    ReplyDelete
  26. hi guys, i have found this tutorial being of much help. but there is a bit i dont understand. where and how are i supposed to paste the code for the music player. i icant find the editor you are talking about. regards

    ReplyDelete
    Replies
    1. Hi ndag,

      You can add the HTML right into your blog post or into a layout HTML gadget in the Blogger layout menu. Place the gadget where you want on the blog screen.

      Does that help?

      Delete
  27. Hi Don,

    Your site is awesome and you're a natural teacher; I, however, am clearly seriously tech-challenged. I'm also flabbergasted at how complicated it is, in 2014, to add music to a blog. The mp3 clip is staring at me from my desktop, and it's killing me I can't just pop it over.

    So, I opened a Google Sites account, added the mp3 file to it, and am now trying to add it to a Blogger post. I click over to html and add everything in the green box above in option 1, but clearly I need to replace your song with mine. Maybe this is where I'm screwing up. I put it in like yours using a % sign instead of a space.

    Then what? When I hit publish there's nothing there. Not even the empty boxes other people mentioned. Do I need to switch something on in Blogger? So frustrated!

    ReplyDelete
  28. It's a miracle. It's freakin works. I'm embarrassed to say how long this has taken me, but most of that time was wasted before I discovered your site. You're the bomb, Don. Thanks so much!!

    ReplyDelete
  29. Hi

    I have the exact same problem as Kim. I copied in the code from step 4 but of course took out your link and replaced it with the code address for my own song. Then when I publish it there is just nothing there. This is for my media coursework that had to be finished today and none of the methods have worked. What am I doing wrong here?

    ReplyDelete
  30. Hello Don,
    I've been using Option 1 happily ever since I found this helpful post. However, it seems that he graphic for Google Gadgets that used to appear at bottom left of the player box is now caput. Is there any way to get a graphic to appear there, or am I stuck with the broken / lost graphic symbol from now on??

    ReplyDelete
  31. HELP! As of late November 2014, Option 1 appears to be totally offline and non-functional. My blog now has no audio samples!

    ReplyDelete
  32. THANKS THE SONG IS PLAYING BUT HOW DO I MAKE IT DOWNLOADABLE TO OTHER VISITORS? http://youngzani.blogspot.com.ng/2016/10/name-it-with-bbash.html

    ReplyDelete