Add MP3 Files to Blogger - Part 1

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

Google Sites for Blogger
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:

Create a Google Sites page

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:

Naming a Google Sites website for Blogger mp3 files
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:

Google Sites default site

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:

Blogger mp3 file cabinet

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:

Creating a mp3 file cabinet

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

Default site for Blogger mp3 files


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:

Set sites permissions


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.
47 comments:
  1. Replies
    1. I have searched for this (Free Hosting & Streaming) many times

      Great job Don and I dedicated a post on my blog with a link to your articles:

      http://nfl-18-game-schedule.blogspot.ca/

      Delete
    2. Don just wanted to let you know that the Sites option has been removed from the MORE menu and from Gmail accounts. I had to link directly to Google Sites to add another page.

      Also there doesn't seem to be any limit on the number of pages that you can create, as long as you are below the 5 GB storage limit on Google.

      Each page can store 100 MB times your total page count. I tested it out with a page for music and a page for PokerStars utility files.

      Delete
  2. THANK YOU SO MUCH!

    ReplyDelete
  3. Ok, I created the mp3 folder in Google Sites, which is great thanks... However, I wanna be able to embed a LINK/URL to my Blog Site to point to than mp3 file in my file cabinet w/out it "downloading" it. I right-click the mp3 file that I wanted to use and chose "copy shortcut" and when I add it to my hmtl code in my blog site to play music in the background when I open my blog site, it "automatically" begins to DOWNLOAD the mp3 file from my google site. I simply want it to PLAY the mp3 song, NOT download it. Is there a way to get the ACTUAL URL to LINK to, instead of the "download link URL"? Thanks... babyjbeltran@gmail.com

    ReplyDelete
    Replies
    1. Hi Jordan,

      All you need to do to get a background song to play on your page when you open it is to use the embed HTML command like this:

      <embed autostart="true" height="0" loop="true" src="http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3" width="2"></embed>

      Copy this and replace it with your Google Site link to the mp3 file either in the Post you want it to play in or in your template if you want it to play when your blog is visited. That should work!

      - Don James

      Delete
    2. brilliant tip. Just what I wanted.

      Delete
  4. Thank you for the great tip!
    I was struggling with MediaFire MP3 link.

    ReplyDelete
  5. I embeded a Google Audio Player gadget on my Google site but cant play any MP3 files stored on my hard drive any suggestions?

    ReplyDelete
  6. Mr. James, I do not consider it to be hyperbole when I say that to me you embody the spirit which represents the very best of the social community which the internet is the embodiment of in its most utopic form realized. I am a poet who resides in, was born in and works in New York City. When I appear onstage to declaim my verse my accolade happens to be "the last beat poet", which it is indeed. Upon the recent completion of a new and collected book of poetry called the "Prisoner of Rhyme" and upon posting it at www.mightymightypen.blogspot.com I thought it may be better for the reader to "hear" the word made flesh as a bonus. This is how I came upon your blog site. Now I will learn what I should to fulfill that goal and so will in so doing offer not just praise but thanks. I thank you, John the poet

    ReplyDelete
    Replies
    1. Hi John the Poet!

      Glad to hear it will help you out. Let me know when you have some poems ready for listening - place a comment here! Taking a look at your blog I would really like to hear them. Nice to know there are still beat poets out there!

      I'm with you in Rockland!

      - Don James

      Delete
    2. thanks allot you are really the boss

      Delete
  7. I guess I'm blind. I can't find "Sites" anywhere. Went to More and then to Even More....and nothing. Help. Thanks.

    ReplyDelete
    Replies
    1. By 'Sites' I'm referring to Google Sites. It is a separate application Google offers much like Blogger to create free websites. It allows you to store files.

      Google Sites can be found at a different URL: http://sites.google.com

      - Don James

      Delete
  8. Thanks Don. I got it.

    ReplyDelete
  9. Hi, I already created the site and added files to it. Unfortunately, I cannot open these files, only download. So what I can see in my URL is

    https://sites.google.com/site/mediafiles0427/mp3

    How can I embed it into my blogger account? Thank you! :)

    ReplyDelete
    Replies
    1. Hi!

      Your link is not a file but a path. You need to have the full name in the path such as .../mediafiles0427/mp3/mysong.mp3 That should fix your problem!

      Take care.

      - Don James

      Delete
  10. Hi, I followed your instructions in removing MP3_LINK_URL and here's the code I got. The application shows in my blogger site but doesn't play. What should I do? Thank you!

    ReplyDelete
    Replies
    1. Depending on where you are attempting to access the player from - it may be blocked by your ISP or company. If you take a look at Part 3 of this tutorial I talk about other player options you can use.

      - Don

      Delete
  11. The music played! :) Thank you so much. Just a question, how do you automatically play it? :) Thank you! :)

    ReplyDelete
    Replies
    1. Take a look at the very first comment in Part 2 of this tutorial. You'll find my instructions on auto-play there.

      - Don

      Delete
  12. You've done a wonderful job making this workaround easy to setup. Thank you so much!

    ReplyDelete
    Replies
    1. Hi Maureen,

      Glad it worked out for you!

      - Don James

      Delete
  13. Hi,

    Was wondering if you knew of other storage sites, to upload mp3 too, to be able to share as above on our blogs ... i really dont want to keep adding or making different goggle sites, {as you said, 25 would be the limit per site.}

    Kind regards, Ness.

    ReplyDelete
    Replies
    1. Hi Ness,

      I took a look last night at your request and didn't find anything yet. DropBox used to allow public links but removed them in October. At one time I was able to use Google Docs (now Google Drive) but since then I can't get that to work either.

      I'll keep looking.

      Sorry!

      - Don

      Delete
  14. Thanks, Don!
    I have a meeting to go to tomorrow morning and need to load an MP3 file for it. Your willingness to share information is outstanding and so compassionate. You have me on the way to the meeting ahead of schedule!
    In Gratitude and Appreciation,
    Rozanne
    SM Mktg/PR for Estherleon Schwartz

    ReplyDelete
    Replies
    1. Hi Rozanne!

      Glad it helped you out!! Hope your meeting goes well.

      - Don

      Delete
  15. Hei! Don ... i just do as you said and now i have a google site and what i don't know it how can i upload mp3 songs on my blogg in a label?
    thank you!


    kha.

    ReplyDelete
    Replies
    1. Sorry Vijay,

      I don't understand your question - upload in a label? You can upload your songs to Google Sites using the 'Add Files' button at the bottom of the Google Site page that you created in my tutorial above. You have to go to Part 2 of this tutorial to do that.

      - Don

      Delete
  16. I got this working on two posts on a single blog.
    I added the code to make it play automatically.

    However, that created a problem.

    Since I display the 7 most recent posts, if two of them have embedded audio (set to AUTOPLAY) you hear both audios.
    OR
    on windows 8 native 8 mode of IE, you crash the browser.

    How can I make this work so it only plays the audio if it is the most recent post of if someone goes directly to a post.

    BTW, embedding the audio on a PAGE, rather than a POST, works for obvious reasons, only one page can be displayed at a time.

    My blog where the audio is embedded is http://groshfamily.blogspot.com

    ReplyDelete
  17. Thank you for this! Maybe what I want to do is not possible:
    I am an English teacher. I want to make recordings of students reading their stories available to other students in the class for comment without having the recordings be public anywhere in the process. Is this possible without paying for a host of a private blog?
    Amy

    ReplyDelete
  18. I would like to add mp3 files to my blog. Yet, when I follow your directions exactly as you state them, I cannot get past the name mediafiles step. When I add the name, it copies in the url section just below it. Then when I select create: I get an error message: The location you have chosen is not available. Please help.

    Thanks

    ReplyDelete
    Replies
    1. Hi Patrick,

      I'm not sure what's happening specifically. Maybe you should try creating another new Google Site and add the mediafiles page there as a test. It might just be a configuration problem in your Site.

      - Don

      Delete
  19. I'm using the tips u said for adding background music to a post or site. But, it is only downloading the mp3 file rather than playing. I used ur Embed method also. But, doesn't work for me. Please help.(I'm unable to see arrow to get link to mp3 file, so that I right click on the donwload button and selecting copy link url.)

    ReplyDelete
  20. can i protect my site from not allowing others to get my access..

    ReplyDelete
    Replies
    1. Hi Jack,

      Not sure I understand your question. Are you referring to your MP3 files?

      - Don

      Delete
  21. yes, but google have limit of storage to upload it is the problem, do you have any solution for unlimited storage of file and embed it into blogger.

    thanks

    ReplyDelete
  22. Thank you very much. Well done with the directions.

    ReplyDelete
  23. Much thanks. Well finished with the headings.

    ReplyDelete
  24. Thanks for your personal marvelous posting! I definitely enjoyed reading it, you are a great author. I will ensure that I bookmark your blog and will eventually come back sometime soon. First Off, let me commend your clearness on this subject. I am not an expert on this subject, but after reading your editorial, my understanding has developed substantially. Please allow me to grab your rss feed to stay in touch with any forthcoming updates. I want to encourage one to continue your great writing, have a nice day!

    ReplyDelete
  25. I'd like to load mp3 files to a website and have public access to download them - will this work for that?

    ReplyDelete