Wednesday, 20 June 2007

Blogger: how to upload MP3 files to play in blog posts






This post explains how to effectively upload music MP3s and other audio files via Blogger so that people can play them from your blog post. This trick makes use of Blogger's new video uploading feature, currently still in beta.

As you may know, following the rollout of the now feature complete fancy New Blogger, formerly known as Blogger Beta, Blogger have decided to allow users to access experimental features via the new Blogger in Draft - for example, the ability to upload videos. Users of Blogger in Draft can upload video files, which are hosted for free on Google Video. Video uploading is the first test feature to be rolled out via Blogger in Draft (effectively a playground for users to try out and comment on planned new features which aren't quite ready for prime time yet - more on Blogger in Draft, and its video uploading and some screenshots of the video uploading process plus issues and bugs).

However, Blogger still don't allow users to upload audio files like MP3s. So, my suggested workaround to add audio files is this (sounds like a recipe doesn't it, though no scissors are involved!):
  • take a picture or photo that goes with the MP3 you want to add to your blog - in fact any image file will do, you can even use more than one if you want to, but it's kinda nice to pick something that matches the mood of the MP3 you want to upload
  • take the MP3 that you want to add to your blog post
  • combine the image and the audio into a video file (movie), so that basically the audio "accompanies" the static photo i.e. the photo is the background for the audio you want to store via Google, and
  • upload the resulting video file to Blogger in Draft.
Here's an example of a combined video I made earlier:

video

Apple Mac users?

I only have Windows XP, so these instructions are for XP only. However, Apple Mac users will be able to do what I've outlined above (in fact it's probably even easier for them) using something like iMovie.

How to convert MP3 plus picture to a video (Windows XP)

What you need

You need to have on your PC:
  • at least one photograph or picture file, in a standard format like JPEG or GIF
  • the MP3 file you want to upload - it's easiest if you store it in the same folder as the pic
  • Microsoft Windows Movie Maker (if you haven't already got it with Windows you can get a free download here, but it only works on Windows XP Service Pack 2, not SP1, and there are other system requirements)

Step by step howto

Here's a step by step. Later in this post I've included a video which goes through the steps to illustrate them in practice.
  1. Install and launch Windows Movie Maker (WMM).
  2. Go to menu File, Import into Collections.
  3. Browse to your photo or picture and click Import. You can select more than one image file, if you want to use several, by holding down Ctrl and clicking each one, before you hit Import. If your MP3 is in the same folder, you can select it here too.
  4. You should see a thumbnail (smaller sized version) of the pic in the middle of the WMM window with the name of the file under it. That's the Collections area.
  5. If your MP3 is in a different folder, in WMM again go to menu File, Import into Collections.
  6. Browse to the MP3 file that you want to upload and click Import.
  7. An icon representing that file (pic of musical note) will appear in the middle of the WMM window, with the name of the file under it.
  8. From the Collections area, drag and drop the pic that you want to appear at the start of the video to the bottom of the WMM window, so it's at the start of the grey horizontal bar that's labelled Video. (The bottom section is called the Timeline; if you can't see it, click the Show Timeline icon.) Then drag down and drop the next pic you want to show in the video so that it's after (on the right of) the first pic. And so on for all the pics you want to use.
  9. Next, drag and drop the MP3 file from the Collections area to the bottom of the WMM window, to the start of the grey horizontal bar labelled Audio/Music.
  10. (Optional) You can match the video display duration with the audio. Each pic you add to the timeline will by default show for just 5 seconds (you can change that default in Tools, Option, Advanced, Picture duration). If your audio recording is more than 5 seconds long, after the first few seconds anyone who plays the video will still hear the audio, but then their screen will go blank after 5 seconds. If you don't mind that, it's fine, you don't have to do anything more. But if you want your image to be visible to accompany the audio until the audio finishes playing completely, it's easy to do that.
    • Click on a pic in the timeline to select it.
    • Move the cursor to the right of the pic and it becomes a double headed red arrow.
    • Just drag the right edge of the pic towards the right to lengthen how long that pic is shown for in the video.
    • You can fiddle round with all the different pics in this way and change their durations.
    • Obviously you should move the edge of the final pic so that it matches up with the end of the MP3 file in the Audio bit of the timeline.
  11. (Optional) You can add a title to the video if you want. Go to Tools, Titles and Credits. The options are self-explanatory, you can have a 2-line (or rather 2-part) title, change the way the title is animated etc - I won't go into them further here.
  12. When done, convert the package into a video (called a "movie" in WMM).
  13. To do this go to the menu File, Save Movie File.
  14. Choose My Computer then Next. Give it a filename (with no spaces, as it won't work on Blogger in Draft at the moment if there are spaces in it) and decide where to save it on your hard drive, it doesn't matter where as long as you can find it again for uploading via Blogger! And click Next.
  15. For the Movie Setting, pick the second option: Best fit to file size. For the filesize, as Blogger allow you a max file size of 100 MB but so far nothing above 5MB seems to work, click the up and down arrows until it says e.g. 4 MB (basically so that it's less than 100 MB), or go for a smaller number, maybe it's best to make that as small as it will let you, though obviously the smaller the file the worse the sound quality - it's a trade off. And hit Next.
  16. Now go have a cuppa tea and leave it to do its thang. It'll save the MP3 and pics to a .WMV video file.
  17. When it's done, just upload your WMV file to Blogger by logging in using your usual Blogger login details via Blogger in Draft, creating a new post and using the new video upload icon in the toolbar (for more on video uploading using Blogger in Draft see this post and this post).
  18. Be warned - it can take absolutely ages to upload.

Instructional video

And here's a video showing how to make the video I've posted above, just to be meta / recursive. Ironically the under 5 MB version I made of it still wouldn't upload to Blogger in Draft (see my previous post about the bugs), so I gave up and put it on YouTube:


Points to note

A few things to be aware of:
  • MP3 isn't the only option, it can work with other formats too, as long as you can combine them into a video with your video making program, e.g. WMA with Windows Movie Maker.
  • Copyright - you can only combine or upload music or audio files where you own the copyright or have the permission of the owner to do that, e.g. some Creative Commons licensed files - for links to collections of CC-licensed music, see the Creative Commons audio page. When you upload a video to Blogger you have to tick a box confirming your agreement to the conditions. Though I think it's somewhat ironic that it says you can't upload anything "infringing or obscene", when the Google Video top 10 videos list looks like this...!:

Tags: , , , , , , , , , , , , , ,

44 comments:

Jo said...

Thank you so much for the information on using windows movie maker to add mp3 files to a blog. Your instructions were great!

Improbulus said...

And thanks for your feedback Jo, glad to have helped!

Luisa Perkins said...

Thanks; this was hugely helpful!

Dandush said...

Perfect detailed info! Thanks!

Jeff Haywood said...

One of the most useful, concise and informative posts I've read this year. Thanks

പതാലി said...

Thank you very much.

പതാലി said...

വളരെ നന്ദി...
ഏറെ ഉപകാരപ്രദമായ പോസ്റ്റ്

What I written above is 'Thanks, very valuable post'
Its a regional language in India. Its name is MALAYALAM

Thanks

Bob said...

What can I say, except thank you very much for such a well written and helpful article. Fantastic!

Dalida said...

thank you so much for your help!

Improbulus said...

Thank you all for taking the trouble to provide feedback, I really appreciate your comments and am very pleased that my post was helpful to you.

Jojo said...

I had been unsuccessfully looking for the trick for a long time.
Oh happiness to find it finally !
A thousand thanks from France for your clear and complete help !

Jen said...

Amazing instructions. Thanks!!

! said...

thank you!!

Anonymous said...

thank you very much!

Ecolog said...

is it still no way to download just mp3?

ELHAMAT said...

Man... This is the Coolest thing to do, you help me a lot.
You saved me of doing many things to do, and still yet more neatly to represent the mp3 or way file that I have.
You are very very good.

Thank you so much.

Vishwas Krishna said...

Thanks a lot. You have explained it very well. Could do it in one try itself.

Lori Polin said...

Great tutorial - exactly what I needed to post an mp3 interview up on my site. Thank you.

frank said...

Thanks for your help!

Anonymous said...

What a great tutorial.. thanks =)

Bill Layton said...

thank you thank you thank you!!

Merv said...

amen!

Anonymous said...

it's very complicated, though

Anonymous said...

any idea on how to make it auto play?

widodo said...

Thank you so much.

Roosevelt Cooper said...

Thanks this was a great idea!

Nicholas Tucker said...

Thanks for the tips!

Hugo Pineda said...

Thank you very much, has been a great help!

Anonymous said...

yo thanks

Ashley said...

Thank you SO MUCH! Wow, this really helped.

Katarzyna said...

THANK YOU! THANK YOU! THANK YOU! times a million and two!!! This was awesome!

Bill Layton said...

Great tutorial, I could never figure out why it was so difficult to put audio up on the web since it's less advance than video! a reminder to all to record in a location where your sound will be the best possible! I've watched and listened to so many recordings made in hollow-sounding rooms and windy places.

newsman.knp said...

it was good guidance. to the point precise and right.

Tabitha said...

Dude thanks so much!!!

xyberbit said...

Super and Helpful!!! Thanks a lot!!!

Alyse the Awesome said...

Oh my gosh, thank you so much, I've been looking forever!

Martin said...

So simple and so smart. Thanks!

JGHS Book Club said...

Your right about the time it takes to upload ...absolutely aggggggeseessss.... and then some

Rebecca Emin said...

Thank you so much for this helpful post. Much appreciated.

chris and alex said...

I have a question. When my husband and I tried this it substancially hurt the quality of the song. Do you know why that is, or how to avoid it?
Still great information.

अपर्णा said...

Thank you so much...Could use this to post a video on my blog that I created out of an MP3 I had to post...

Very nice article...

Majo said...

I SO appreciate your concise instructions. It works! However, my 3 minute and 11 second song will only play 1 minute and 52 seconds. How to fix this? Thanks!

Alex Jefferson said...

My 37-minute podcast won't even go down to anything below 30 MB! Thanks for the help anyway. I guess it only works for songs.

Anonymous said...

THanks SOOO much for your help!!