How to Embed MP3 Audio Files In Web Pages

Learn how to embed MP3 files (like songs, music or audio podcasts) in web pages so that visitors can listen to the audio in the browser via the Flash player without requiring Quicktime or Windows media player.

Embed MP3 Files with Flash Players

Here we explore Flash based MP3 players from Google and Yahoo! that are small in size and also easy to embed in web pages.

1. Google Reader MP3 Player

Google Reader has an inbuilt MP3 player that is pretty much the same as Gmail player but it also works on non-Google websites. This player has volume controls, no Google branding and it auto-detects the duration of the music file so your readers know how long the song will last. Here’s a live example followed by the HTML embed code:

To use this MP3 player on your website or blog, copy-paste the following code and replace the MP3_FILE_URL with the link to your MP3 file.

<embed type=”application/x-shockwave-flash” flashvars=”audioUrl=MP3_FILE_URL” src=”http://www.google.com/reader/ui/3523697345-audio-player.swf”width=”400″ height=”27″ quality=”best”></embed>

2. Yahoo! MP3 Player (inactive)

If you think normal is boring, check this out. Yahoo! offer a code generator (Easy Listener) to help you create a Flash based MP3 player that matches your website color theme and layout.

Though this Easy Listener MP3 player requires you to pass the address of the web page that contains the MP3 file(s), you can directly pass the MP3 link and it will work just fine. Supports auto play and you can decide where the meta data associated with the MP3 file should be displayed.

<embed src=”http://webjay.org/flash/dark_player” width=”400″ height=”40″ wmode=”transparent” flashVars=”playlist_url=MP3_FILE_URL&amp;skin_color_1=-145,-89,-4,5&skin_color_2=-141,20,0,0″ type=”application/x-shockwave-flash” />

3. Yahoo! Media Player

If you maintain an MP3 blog or run a podcast and regularly link to MP3 files, it makes little sense to embed a separate Flash player with every MP3 file. I would therefore recommend using the Yahoo! Media Player that auto-detects links to MP3 files in your web pages and creates an embedded player for each link.

All you have to do is insert the following link in your blog template and all MP3 hyperlinks will be converted into inline MP3 players. This also has the shuffle feature and visitors can easily skip to any song in the playlist. Excellent stuff.

<script type=”text/javascript” src=”http://mediaplayer.yahoo.com/js”></script>

4. Odeo MP3 Player (inactive)

Odeo offers a pretty impressive MP3 player that works perfect in web pages as well as RSS readers but a small issue is that Odeo Player requires you to type the exact duration of the song in the embed code. You can skip this step but then the progress bar won’t reflect the true status when you play the song. And there are no volume controls.

To use Odeo MP3 player in your website, add the following code replacing MP3_FILE_URL and DURATION with relevant values.

<embed type=”application/x-shockwave-flash” src=”http://www.odeo.com/flash/audio_player_standard_gray.swf”width=”400″ height=”52″ allowScriptAccess=”always” wmode=”transparent” flashvars=”audio_duration=DURATION&amp;external_url=MP3_FILE_URL” />

Summary: With so many choices, how do you pick the right MP3 player for your website ?

As a minimalist, I prefer the Google Reader MP3 player since it offers volume control and minimal branding. But if you are regularly linking to MP3 files, this will prove cumbersome and I suggest integrated the Yahoo! Media Player on your website.

Related: How to Trim MP3 Songs

 

Ads by GoogleExtract Audio from DVD
Rip audio from DVD video files and save as mp3. Free Download. www.nch.com.au/switch

Reader Comments

Is it possible to include multiple links to create a playlist? I haven’t had the chance to test this myself, so I thought I’d ask.

Written by CodeRed on 02.06.08

You could download the players to your own server, so you’re not dependent on others. For example, download and save link to your server and then simply change the URL for it to the location on your server. Dunno if that has any legal implications, though.

Written by Jody on 02.06.08

FlowPlayer ( link ) is another fullblown media player (video: flv, audio:mp3, that is) for the web. I am not sure if Yahoo lets you download the media player and lets you program against it! Esp, if you want to play it in offline mode, you need a player which you can run from your own machine and program it to your hearts content. I have found Flowplayer to be very useful.

Written by BollywoodPlusPlus on 02.28.08

Hi,

for the life of me, any flash player I use won’t buffer form my site. Could it be my provider? Embeddes quicktime goes wrong in any browser on Mac and PC, also plays for only a couple of seconds, Google reader plays fine on PC, not on Mac/Safari, that is to say: a file from my server. From yours it’s just fine. I’ve looked for hours on the web, but cannot find solutions or even hints.

Thanks!

Paul Delcour

Written by Paul Delcour on 04.11.08

How i add a play list to Google MP3 Player?

Written by Mig Ponce on 04.11.08

building site including podcasts/ downloads simultaneously playing on MAC PROBLEM IS on PC downloads entire file before ever begins to play Want to know how to fix so PCs will simultaneously begin playing while downloading???

Written by Cris Kurtz on 04.28.08

I have a Box.net account and have uploaded two voiceover MP3 files to it. I’m trying to post these clips as Blogger posts using the Google Reader MP3 Player. I copy the Box.net “link to this file” and replace “MP3_FILE_URL” with my MP3 link. The Player shows 0:00 when I select play, but no sound or movement. Is this a browser problem? A Box.net problem? Should my file be shared/unshared? Can’t figure this out.

Written by Eric on 05.20.08

Eric, I’m also trying to get mp3s from Box.net, but I don’t think it’s working because mp3s on Box.net don’t have their own URL with “.mp3″. I’m trying to find a site that can host my mp3s which I can use for Blogger.

Written by William on 06.09.08

I am having the same problem as Eric/William. Is there a certain standard for what type/quality of mp3′s can be played? I’ve replaced the MP3_FILE_URL and tried loading numerous podcasts, but no luck.

Written by Luke on 06.25.08

Is it possible to just embed a code onto myspace that would allow you to upload your own mp3s straight to the program without bothering with mp3 urls and finding some site to host the friggin mp3 just to get a url to put on a crappy flash program?

Written by Ray on 06.26.08

Luke – can you post one of the podcast urls you mentioned. And no – there’s no standard that i can think of. 44,48,stereo,mono – all kinds of compression rates – doesn’t really matter.

Written by Andy on 06.27.08

I’m trying to upload one of these on my blogger blog (I’ve tried all but the Yahoo Media Player) and it wont work, it keeps saying the HTML tag is not closed! If I override the error message the picture shows up but nothing else, doesn’t show duration and doesn’t play. Anyone else have this problem?

Written by Amanda on 08.05.08

The google reader plays in the Firefox, Opera and Netscape browsers but will not play in Explorer. Does anyone have a solution? thanks

Written by Perry on 08.15.08

The google reader plays in the Firefox, Opera and Netscape browsers but will not play in Explorer. Does anyone have a solution? thanks

second that…

Written by yoyo on 09.14.08

Hey,

I have added these files to my site but it’s only working in firefox and not internet explorer, why is this? Also when in IE it states that I need a quick time plugin, all I’ve done is copy the text as presented above. Am I doing something wrong?

Thanks,
Dave

Written by Dave on 09.24.08

@Andy

>”it wont work, it keeps saying the HTML tag is not closed! If I override the error”

Someone almost had it, but if you are having problems with the embed tag, you need to replace “/>” with “>”

This closes the first “embed” tag and adds the fully qualified closing tag to complete the block. This is to keep people from injecting their own HTML into Blogger and doing dirty, dirty things to your blog.

Written by monoclemonkey on 09.30.08

As other have noticed the <embed… example in Google Reader MP3 Player doesn’t work for some browsers. Instead right-click the page and choose “Show page source…” or whatever the option is called on your browser and language. Copy paste the part starting with “<object “. Change the three URIs regarding mp3-files, and voila! You have a terrible wall of text that at least Firefox and IE can parse…

Written by Vemedu on 10.06.08

Nice tip to emded MP3 files in webpages this will help a blogger to make his own radio station using webpages

Written by live7n on 10.07.08

Tip: If you delete the “.mp3″ from the end of your audio files and change the code accordingly, browsers will avoid attempting to open some other mp3 player.

Written by David on 10.20.08

No matter what I try, I just can’t seem to get any of these to work!

I uploaded a 2mb MP3 file to Media Fire, copied the embed code into all three of the media players above, and none of them worked.

This is for use in Blogspot, by the way. I tried putting it in the Sidebar and in a New Post.

Can anyone help?

Written by Clark on 01.07.09

Sorry, I can’t post the working code. As stated a few comments above, you need to “view source” on this page and grab the object tag including the embed code inside of it and update the URL. that will work for IE

Written by Jason on 01.22.09

Thank you so much for pointing me to Yahoo’s MediaPlayer. I am building a musician’s web site, and have been going round for days, until I found your page. YMP’s minimalness is exactly what I was looking for. It takes it upon itself to link to one .mp3 at a time, or to create a playlist out of all them on the page. Nice.

Thanks again.

Written by Suzanne on 01.24.09

For the Google player, just add “&play=true” (without quotes) to make it work in IE. It is bogus text but it will make the player work in IE and FF at least.

Written by James on 02.17.09

Hi,
I wondering that can i use my Windows Media Player on my blog to play a playlist?
for example,i had created a playlist and uploaded onto to web,is that possible for the WMP on my blog to play it so that my visitors are able to choose to hear what songs they like?

or you can visit my blog to see the WMP,thanks.

regards,
skyline100

Written by skyline100 on 02.26.09

BTW, the EasyListener Yahoo thing might be dead. They have something new now, the link . I think the former application was pretty cool, but this one does the trick too.

Written by James Revillini on 02.27.09

I got all these players to work on my blogger site, but for some reason my songs are only playing for 3 minutes and then cutting off. Even when the song starts, the players will display 3:01 for the time even though the songs are longer. Can anyone think of any reason for this? All the players are doing it and i am using box.net? Any ideas will help! Thanks

Written by Lindsay on 04.04.09

Thank you thank you thank you!

The Google one is the best; just be sure you specify the COMPLETE URL for the MP3 file.

Written by bimplebean on 05.12.09

live7n … THANK YOU!

This tip of yours “Tip: If you delete the “.mp3″ from the end of your audio files and change the code accordingly, browsers will avoid attempting to open some other mp3 player.”

This simple fix got it to work in IE8

Written by Bev on 05.12.09