Sunday, March 13, 2011

How to embed an MP3 audio file in a Blogger post

Sometimes it would be useful to be able to embed an MP3 file in a blogger or other blog platform post. There are a number of options including setting up a Soundcloud account.

However, if its just for a one off MP3 and you are able to host it somewhere then you can use Google Reader's audio player to play it back by using this code:

<embed height="27" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=[MP3 URL]" type="application/x-shockwave-flash" width="320" wmode="transparent"></embed>

Replace [MP3 URL] with the full address of where the file has been uploaded, beginning with http://. The player will only play MP3 format files.

Here is an example:



Update 24th July 2012
It appears that Google have disabled this function.

However, most web browsers now support HTML5  which means you do not need an external audio player at all. You can use this code:

<audio controls="controls" height="50px" width="100px">
<source src="http://path.to/filename.mp3" type="audio/mpeg"></source>
<embed height="50px" src="" width="100px"></embed>
</audio>

Which appears like this:



I would recommend putting in a text link to the file below the player so it can be played on devices which do not support HTML5.


53 comments:

  1. Thank you for this useful tip! I am trying to include an interview in a post on my blog, and this seems to work. have a nice day!

    ReplyDelete
  2. loop="false" is not working in my embeded code (repeat over and over).
    do you know how can I fix it?

    ReplyDelete
  3. The code I have given does not include loop="false". Not sure where you got that from. I actually stopped using the Google audio player and switched to the Wordpress flash player which i call up from my own server for Blogger pages. You can see an example here:

    http://www.ecalpemos.org/2011/10/recreating-miles-davis-muted-trumpet.html

    ReplyDelete
  4. Thanks for your help here, Gordon, but I'm still not having success.

    Does this look like an address that should work in the URL space in the code you offer above?


    http://www.ziddu.com/download/18247207/WS500425.mp3.html

    ReplyDelete
  5. I had a look and that service dows not seem to allow direct linking to the mp3 file itself so you can't use this method. I upload mine to a web hosting account that I have (simpler and easier to link to).

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Thanks! I'm trying it out on my blog that will appear this Tuesday (2/14/12).

    ReplyDelete
  8. Thank you for this tutorial; very helpful.

    ReplyDelete
  9. Thank you this was simple and to the point.

    ReplyDelete
  10. IT DOESNT WORK ON http://dc496.4shared.com/img/1260412264/b0a87406/dlink__2Fdownload_2FUfTj_5FAaD_3Ftsid_3D20120317-31958-965cda40/preview.mp3

    ReplyDelete
  11. I am trying to post some audio, follow your steps , it seems to load but when I publish and click the start icon I get a Nan:Nan above the sound clip, no sound?

    ReplyDelete
  12. Not sure James. NaN means "not a number" and usually indicates a javascript call that expects a number but is sent a string instead. I need to update this article as I have a better way of doing this. I just need the time to get round to it (like everything in life).

    ReplyDelete
  13. I got the Nan:Nan too......it's because I left the brackets [ ] in.....if you delete them, the audio plays perfectly. :)

    Thanks for this post! It was super helpful!

    ReplyDelete
  14. Thanks for the correction! I had used the square brackets as a normal programming shorthand for "replace with....". I guess people haven't realised that. Incidentally, I believe that Dropbox now provides a small folder where you can put audio files and call them straight from a URL without having to log in. I haven't tried it, but it might mean not requiring a hosting account.

    ReplyDelete
  15. What are my options for websites that can host files that are roughly 55-65 MB per MP3? I'm trying to do a D&D blog and I've got the files thus far saved to Google documents. Can hour long mp3s even be played on Blogger or not?

    ReplyDelete
  16. I use this technique at work to embed long audio interviews (30 - 60 minutes) in our blog pages. We are able to host them on our own web server.

    I believe that Drop Box now has the facility to upload some files and link directly to them via a URL for embedding purposes.

    Failing that, there are a number of very cheap hosting services. One that I saw recently was Blazing Host. Its run by AMS Computer Services who have been in the hosting business since the 90's and should be fine. There are lots of choices though.

    ReplyDelete
  17. Actually, this service looks quite good:
    http://kiwi6.com

    I haven't used them, but it might be worth a try.

    ReplyDelete
  18. Is this code really supposed to end with "transparent">embed>?

    I get the player embedded, but after the player it shows the "embed>" and the player doesnt play.

    ReplyDelete
  19. Hello Jeff. Your editing software seems to have altered the code. Look again in the code in the article. A bit of it seems to have been removed by your software or by Blogger (somehow). Might try pasting it into a text editor then copying and pasting again into your software. Sometimes copying and pasting from a web page can add non standard characters by accident especially if your web browser is set to a different language.

    ReplyDelete
  20. It copied it fine, but what I am seeing above (using firefox) is:

    embed>

    I found that removing the "embed>" from the end cause it to work fine though.

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Will this work for http://f.cl.ly/items/0S371C1d12133j412e1q/03%20-%20Jalley%20%5Bwww.AtoZmp3.net%5D.mp3 .I am asking u this because its not working.So can u clarify my doubt?

    ReplyDelete
  26. hi there, this is exactly what i need, i am using google chrome and don't see you example above, and i have tried to use the code and it didnt work either...any suggestions? and thanks for this.

    ReplyDelete
  27. The link seems to have disappeared. In my own blog, I cannot embed audio, and audio clips that I embedded a while ago now do not work. Has Google changed Blogger so as to make it all but impossible to embed audio?

    ReplyDelete
  28. It appears Google have removed it or renamed it. I suggest downloading this WordPress plugin, extracting the player.swf file from it and uploading it to wherever you are hosting your audio files.

    http://wpaudioplayer.com/standalone/

    You can then refer to it using an embed code in a blog post. You can see an example of this here:

    http://www.ecalpemos.org/2011/01/theme-music-from-gardening-today.html

    The embed code would look like this:


    <object data="http://path/to/player.swf" height="24" id="whatever" type="application/x-shockwave-flash" width="400">"
    <param name='movie' value='player.swf'>"
    <param name='FlashVars' value='playerID=latestmessageplayer&soundFile=http://path/to/file.mp3'>"
    <param name='quality' value='high'>"
    <param name='menu' value='false'>"
    <param name='wmode' value='transparent'>"
    </object>

    You would want to have a link next to that straight to the MP3 file for playback on iOS devices that can't handle Flash.

    ReplyDelete
  29. If your web browser supports HTML5 then you do not need an audio player at all, you can use this code:

    <audio controls="controls" height="50px" width="100px">
    <source src="song.mp3" type="audio/mpeg" />
    <source src="song.ogg" type="audio/ogg" />
    <embed height="50px" width="100px" src="http://path/to/file.mp3" />
    </audio>

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. Hi,

    I'm using this code:






    the player shows up but the song don't play . please help

    ReplyDelete
  32. Me too. Song doesn't play but player shows.

    Blogger keeps changing and I want to tell these bloody computer idiots to keep things the same because changing them means you keep having to learn new stuff.
    It's definitely chilling for communication.

    ReplyDelete
  33. Here is how to do it in HTML 5:

    <audio controls="controls" height="50px" width="100px">
    <source src="http://downloads.bbc.co.uk/podcasts/radio4/belief/belief_20120730-1700a.mp3" type="audio/mpeg"></source>
    <embed height="50px" src="http://downloads.bbc.co.uk/podcasts/radio4/belief/belief_20120730-1700a.mp3" width="100px"></embed>
    </audio>

    Just replace the long address of that file with the address of your file. It will support .mp3 and .ogg files. To change to .ogg change the line "audio/mpeg" to "audio/ogg".

    HTML 5 is the future of the web and most browsers will soon support it. It also works on iPad an mobiles.

    By the way, you can't put html code into a blogger comment as it gets stripped out if its not part of the small set of markups that Blogger supports. You need to convert it to character codes which you can do here:

    http://www.hudson.nu/convert-html-to-blog.html

    I hope this helps.

    ReplyDelete
  34. Wow Cool,
    Thank you very much, I love it.
    It work properly (thumbs up)

    ReplyDelete
  35. Thanks Gordon. It works like charm! I just made a post on Best Christian Wedding Songs and Love Songs using this method and it works perfectly. Thank you.

    ReplyDelete
  36. Thanks for this post. I used the code which has been posted last. Using this code, Can the audio be played automatically?

    ReplyDelete
  37. I found the answer to autostart. But i could not start loop.

    ReplyDelete
  38. Try this:

    <audio controls="controls" height="50px" width="100px">
    <source src="song.mp3" type="audio/mpeg" autoplay loop/>
    <embed height="50px" width="100px" src="http://path/to/file.mp3" />
    </audio>

    ReplyDelete
  39. Nice work my man, thanks for the tip!

    ReplyDelete
  40. hey gordon.my blog is about pronunciation of words.so i want functionality where we can hear how the word sounds onclick. please please help me.and solution has to be browser independent if possible..thank you.

    ReplyDelete
  41. Hello Dhaval,
    There are two approaches to this:

    1. Use a speech synthesis (text to speech) engine to generate the audio on the fly - this will be difficult if it is a language that the engine does not know how to pronounce correctly.
    2. Record short audio files for each word and embed those in the html - more useful if its only for a limited number of words.

    ReplyDelete
  42. please say me .

    hot to make music url ?

    where website make music url ?

    theboyminmin@gmail.com

    ReplyDelete
  43. HI, I was sent an MP3 file and I want to upload it to my blogger blog. I dont know how to do this. Do I need to upload it to somewhere else or can I keep it in my computer and upload it from there?
    Please help :)

    ReplyDelete
  44. Yes, you need to find somewhere to upload it to first. I have a web hosting account which makes this easy. If you don't have one you may be able to upload the files to a free Google sites or google pages account.

    Here is a web pages I found with info on this and other ideas:

    http://gh.cm/137NkpB

    You might find it easier to get a cheap hosting account to store your files. I pay about £60 a year for mine and it hosts several web sites as well as all my email and other files. There lots of even cheaper hosts out there now if you want something simpler. I have a list of some UK based hosts here if that helps. I don;t know about current US based hosts but I suspect they would be cheaper:

    http://www.ecalpemos.org/2011/10/which-uk-web-hosting.html

    ReplyDelete
  45. Hi, Gordon, wonder if you could help. I'm using TuneScoop to host a short mp3 audio clip - the site provides a 'direct link' url and I'm using this in your updated code. I create a new post, switch to the html tab and paste in your code (replacing your example url with my own). But when I publish the post, it's just blank where the payer should be showing. It flashes up for a split second when the page loads, but then disappears. The player on this page, under your code, is also missing. Any ideas?

    ReplyDelete
  46. Sounds like you are using a browser that does to support html5 or the audio elements of it. I am on my iPad at the moment and the example in my post is working.

    ReplyDelete
  47. Thanks for the quick reply, Gordon. I'm on the latest Firefox and did some research which suggests html5 incompatibly may be the issue (although I also found some which was contrary to that). As it happens, when I looked closer, TuneScoop offers an embed code alongside all the others, so I was able to use this instead.

    ReplyDelete
  48. Thanks so much for the HTML 5 code. This worked perfectly for me today and is a great addition to a blog post about the SCOTUS Prop. 8 arguments. It was nice to be able to post both a live audio player in addition to links. Really appreciate fellow bloggers like you who offer such great support. You can check out the player embed here:http://ronthink.blogspot.com/2013/03/breaking-news-scotus-and-prop-8.html

    ReplyDelete
  49. Awesome! Just what I was looking for. Keep up ;)

    ReplyDelete
  50. This comment has been removed by the author.

    ReplyDelete
  51. Hi, thanks for that (the HTML5 solution) but I am still having little joy. Pasing the code into my Google blog similar to this one) puts a player on the page. On previous advice I created a Google website and uploaded the mp3 files as attachments. They are there now, but for the life of me I can't work out what the link address is on that site to past that link into the relevant space in the HTML code. Can you sort me out?

    ReplyDelete