Four Quick and Easy Ways to Embed MP3 Files Into Your Site
Once upon a time I was in a rock band. When I was building our website, I naturally wanted to put some music up so visitors could listen before purchasing our songs on iTunes. After a bit of research I found out that there are a million ways you could go about it, some better than others. Sadly, after two albums and lots of good times, my band The Van Buren Regulars no longer exists. Fortunately, what I learned about embedding music lives on and is easy enough to pass along.
Today we’re going to look at four easy ways to embed MP3 files into your website. All of these methods are free and take mere minutes to implement. Let’s check them out!
Simple Player with Editable Parameters
Using an object tag, we can create our own little player with a few lines of code. Paste the code below into your page and insert the link to your MP3. Then you can customize options like height, width, background color, loop, and autoplay.
Source: O’Reilly Media
<object width="300" height="42"> <param name="src" value="LINKHERE"> <param name="autoplay" value="false"> <param name="controller" value="true"> <param name="bgcolor" value="#FFFFFF"> <embed src="LINKHERE" autostart="false" loop="false" width="300" height="42" controller="true" bgcolor="#FFFFFF"></embed> </object>
Here’s the player that results (may take a minute to load):
Google Reader MP3 Player
I’m sure you wouldn’t be surprised to know that Google has a free resource that suits this problem perfectly. To use the Google Reader MP3 player, simply paste the following code into your page and point the “audioURL” at your MP3 file.
<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf? audioUrl=http://LINK" width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" />
Here’s a sample:
Yahoo Media Player
The Yahoo Media Player takes a drastically different approach by presenting viewers with a very minimal piece of text and a play button instead of a full-fledged player. However, when you click the play button, a floating player pops up that stays with you as you scroll. Pretty snazzy!
For the Yahoo player, you first insert this piece of JavaScript into you code:
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Then, instead of creating a new player for every MP3 you want to embed, you simply link to the MP3s in your HTML and it automatically creates the player for you.
<a href="LINK.mp3">Song 1</a> <a href="LINK.mp3">Song 2</a>
Here’s the example:
Song 1
Song 2
Also note that even before you click the play button, the Yahoo player is docked and ready to go at the bottom left of the window. Just click on the arrow to slide it out.
MixPod
MixPod creates a free flash widget to embed into your site. There are pros and cons to using this service compared to those above. The cons are that you have to sign up (free) and the player displays a link to MixPod. The pros are that you get a plethora of great design options, embedded song information including artist and song name, the ability to adjust the color scheme to match that of your site, and access to popular songs and playlists.
Setting up a MixPod is super easy and requires no knowledge of coding beyond where to paste the snippet of code they give you. All you do is paste in your MP3 link, insert the artist/track info for all the songs in your playlist, and choose your skin and colors. Then MixPod provides you with a rather large chuck of code to paste into your site. The result is pretty slick.
Here’s a shot of the other skins you can use:
MixPod is just one of many providers of free flash players you can embed into your site. Check out this post over at CNET for list of good ones.
Conclusion
This post is a little on the short side but that’s because embedding music has really become super easy. All of the players above offer you simple, copy and paste solutions to putting MP3s on your site. The player you should go with depends entirely upon the way you want to use it. Sometimes you just want something as minimal as possible while other times you want a flashy, animated player your viewers can’t miss. Personally, I love the skins and functionality available on the MixPod players. However, only the Yahoo offers that great floating feature so the player stays with you and can be turned off or manipulated at any time. leave a comment below to let us know how you embed MP3s into your sites or which of these options you like best.
Thanks for the goog Post! This is the way for my Rap Songs
I’m liking the yahoo option. You can keep things discrete when needs be. Very nifty! Thanks for the post.
How to autoplay the file.
Hi, I have constructed a basic website for my band(see above website)
i want to add an mp3player and upload my songs to this so anyone can listen to the songs without waiting to long for them to load up.I have read your article about the google mp3 player which seeems ideal.
I do not know much about computers so I don’t know where to copy and paste the code for the mp3 player to be seen on my webpage.
Also not sure how to load my mp3 songs into the player.
Please can you help?
Regards,
Phil.
Hi I can make any embeded mp3 player float.
on my page.
check it out on my page
http://bullioniefrench.com/player/lachance1.html
unfortunately at this time Odeo (which i am using) is down. So you can’t see the player, but it should be up in a few days.
Grab the code, i got it from a free javascript guy anyways.
Cheers.
BP
Hi, goto http://www.123mp3download.com and search the music, click on listen and embed the code. Its easy.
I don’t know if I am doing something wrong, but I have created an MP3 player but cannot seem to get it to load/play on my google website. I cannot seem to get an http url for my player to even add the url of my gadget. So far I have used Hoover web design (I really like this one, but for the life of me can’t figure out how to get it on my google page.) and Aleo Flash (Just the trial version. If I can get it to work on my google page I might invest in the paid version.)
If anyone can PLEASE help me out or tell me what I am doing wrong!! I would greatly appreciate it b/c I am driving myself crazy. lol…
Updated code for the Google Reader mp3 player at Mori79
http://sites.google.com/site/mori79/html-gadgets/media-players/google-reader-player
What?, http://www.mylrs.com/members/carmenelectrasextape.aspx Only carmen electra sex tape, 7711,
i just wish that mp3 players could also have some 10 band equalizers and bass boost functions-;.
thanks for the post! Very helpful since google player has suddenly disappeared on me!
Hi,
Try embed songs using http://www.123mp3download.com
Regards
those generic mp3 players that are made in china are really cheap but i still prefer to use my ipod ***
Thank you Joshua, so much for this post. Code works perfectly. So much easier than doing it with Dreamweaver.
thanks for the tips. i still haven’t got it worked out yet, tried the xpsf, but opera keeps playing the hideout radio playlist. how do i stop that? thanks again.
where to paste once i copy?
thanks alot for these players dude
Needless players :(
Well I need a randomize mp3 multiplayer and unlimited songs with giving own mp3 link. Any Idea guys?
Thanks for nice post! Keep it up..
hi there, thanks for the post.
Here’s a cool customisable and embedable player:
Peckplayer: http://www.scopart.fr/peckplayer/
cheers :-)
Thanks indeed for this simple and easy solution! The Simple Player is super. However, for Google Reader MP3, the sample result is missing, whereas for MixPod no codes are given – making it unusable to most readers.
Hello. I wanted to drop you a simple note to express my thanks. I’ve been following your website for a month or more and have absolutely obtained lots of reliable information in addition to enjoyed how you’ve organised your website. I will be planning to operate my own weblog even so feel its way too general and I want to focus on scaled-down topics.