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:

16 comments:

Synne said...

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!

fito1038 said...

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

Gordon said...

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

ABHISHEK KUMAR SRIVASTAVA said...

thanks
its working
nice tutorial

Tiffany Antopolski said...

Thank-you. Very helpful.

Good day.

Austin Fleming said...

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

Gordon said...

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).

Thinking Christian With Joe said...
This comment has been removed by the author.
Sparrow said...

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

Vanessa Irvin Morris said...

Thank you for this tutorial; very helpful.

Mr. H said...

Thank you this was simple and to the point.

June Lenard Arceta said...

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

James Harrod said...

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?

Gordon said...

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).

M. or W.W. said...

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!

Gordon said...

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.

Post a Comment

To leave a comment you need one of the account types listed (e.g. Google/Gmail, Wordpress, Open ID). This gives you the option to be notified of replies to your comments.