Wednesday, October 01, 2008

How to host MP3 files on Blogspot

Here is a step by step tutorial on how to host MP3s on Blogspot. These instructions are based on the information from the Google Operating System blog. The basic overview is to upload your MP3 file to Google sites, and then use an embedded Flash audio player from Odeo to make it available to your readers.
  1. Go to Google Sites at http://sites.google.com/. Sign in to your Google account.
  2. Give your site a name. Fill out the rest of the information as you see fit. Click Create Site.
  3. You will be brought to your site page. At the bottom of the page is an Attachments section. Click the little plus sign icon to the left of Attachments, then click the Browse button.
  4. Browse to your MP3 file and then click Open.
  5. Wait while Google uploads the file. If you want to, you can also edit the page to include explanatory information about the attachment, but it isn't necessary.
  6. Once the file is uploaded, right-click on the link to the file under Attachments and select Copy Shortcut.
  7. Paste the link text into a text editor. Remove anything that appears after ".mp3" in the link text. You should end up with something like this:
    http://sites.google.com/site/bluebearrblog/Home/FourSeasonsSpring.mp3
  8. Now copy the code below, and paste it into your text editor.

    Replace the text [MP3 file address] with the actual link to your MP3 file. In the case above, here is what it looks like:

    <embed src= "http://www.odeo.com/flash/audio_player_standard_gray.swf" quality="high" width="300" height="52" allowscriptaccess="always"
    wmode="transparent" type="application/x-shockwave-flash" flashvars=
    "valid_sample_rate=true&external_url=http://sites.google.com/site/bluebearrblog/Home/FourSeasonsSpring.mp3" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  9. Open a new window, and go to Blogger.com. Open up a new post, or edit an old post.
  10. Once you get to the point where you want the music file to appear, click the Edit HTML link at the top of the screen.Paste in the text ("<embed>...") from your text editor. Then click on Preview. You should be able to see a music player like the one below.




11 comments:

Native Minnow said...

Thank you for posting this. I knew how to link to mp3 files online, but found that I was limited in what I could put in my "What I'm Listening To" box because I could only link to mp3 files that were already available online. Thanks to your tutorial, I can now upload my own and link to them. I'm glad you were willing to help out technologically challenged people such as myself.

peaj said...

Hey, glad to help! I created this for a friend of mine, but glad that you found it helpful.

Dave Schock said...

massively helpful--thank you

mergenc said...

It's just great, thank you... ;)

Raka said...

Thanks a lot! Now the visitors of my blog can listen to Sa Dingding tune I put up there :D

Kiki Eleanor said...

BlueBearr, you rock! This works great and I'm so happy I posted that Kruder Dorfmeister remix of Useless thanks to you.

Sam said...

Thank you for posting this. I have been trying to find a way to hot MP3s with the whole .com/lalala.mp3 URL. I have created my site on Google Sites but when I go to my site there is nowhere to add attachments. Can anybody help me with this? (Yes I went to edit and there is still no attachment option)

joe said...

Hi,
I've read a ton of these recently, but I love how clearly you explain the process.

Strangely enough, any flash player that I try to embed in Blogger, either in the posts or using the HTML/JavaScript widget works in Chrome, but no other browser.

Any ideas what I could be doing wrong?

Thanks so much - great blog!
Joe

peaj said...

Sam: Not sure what to tell you if your Google Sites page doesn't allow for attachments. One option is to find some other free hosting site that will allow you to host your files there.

Joe: If it works in one browser and not in the others, then it sound like the problem is not your web page but with your browsers. Have you confirmed that the problem with non-Chrome browsers exists across different computers? If it works on other computers, then there might be an issue with your computer.

Anonymous said...

Thanks for the info. For the person who was having trouble, all google sites allow attachments. You have to change the preferences to "allow attachments" because this is no longer the default setting.

Masa said...

Doesn't work... The embedded player does not show up on my Blogspot blog when I browse it with Firefox or Safari. If this method chooses the browser to use, it's not the best way of hosting MP3 files on Blogspot...