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

Deutsch | Español | Français | Italiano | Português | 日本語 | 한국어 | 简体中文

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:

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: Blogger.com, New Blogger, Blogger in Draft, videos, MP3, MP3s, audio, audio files, Windows Movie Maker, Windows XP, WMV, Windows Media, Improbulus, Consuming Experience, A Consuming Experience