Four Quick and Easy Ways to Embed MP3 Files Into Your Site

by on 10th November 2009 with 29 Comments

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








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.


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:


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.

Song 1
Song 2

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.


MusicPlaylist
Music Playlist at MixPod.com

Here’s a shot of the other skins you can use:

screenshot

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.

Comments & Discussion

29 Comments

  • http://www.benck26.de Rapper

    Thanks for the goog Post! This is the way for my Rap Songs

  • David

    I’m liking the yahoo option. You can keep things discrete when needs be. Very nifty! Thanks for the post.

  • Pingback: Novembre: suggerimenti dalla redazione | Your Inspiration Web

  • Pingback: November: suggestions from the Editor | Your Inspiration Web

  • http://www.mybahawalpur.com bahawalpur

    How to autoplay the file.

  • http://www.boogiefeverband.co.uk phil

    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.

  • http://bullioniefrench.com Big Peeps

    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

  • Jack

    Hi, goto http://www.123mp3download.com and search the music, click on listen and embed the code. Its easy.

  • http://sites.google.com/site/whippingupagoodtime/ Tracey M.

    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…

  • LC

    Updated code for the Google Reader mp3 player at Mori79

    http://sites.google.com/site/mori79/html-gadgets/media-players/google-reader-player

  • http://www.mylrs.com/members/carmenelectrasextape.aspx carmen electra sex tape information

    What?, http://www.mylrs.com/members/carmenelectrasextape.aspx Only carmen electra sex tape, 7711,

  • http://www.socket-set.org Socket Sets :

    i just wish that mp3 players could also have some 10 band equalizers and bass boost functions-;.

  • http://www.sonologue.com chhavi

    thanks for the post! Very helpful since google player has suddenly disappeared on me!

  • Marc

    Hi,
    Try embed songs using http://www.123mp3download.com

    Regards

  • http://www.humiditytemperature.com Humidity Temperature

    those generic mp3 players that are made in china are really cheap but i still prefer to use my ipod ***

  • Eileen Westgate

    Thank you Joshua, so much for this post. Code works perfectly. So much easier than doing it with Dreamweaver.

  • http://astro-girls.com/astrology/ astrology

    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.

  • z

    where to paste once i copy?

  • http://www.flowers24hours.co.uk/ florist

    thanks alot for these players dude

  • Pingback: Large MP3 Files - Wix.com Forums

  • LOL

    Needless players :(
    Well I need a randomize mp3 multiplayer and unlimited songs with giving own mp3 link. Any Idea guys?

  • http://www.tinywebdesigner.com Sam Website

    Thanks for nice post! Keep it up..

  • http://www.scopart.fr/ linibou

    hi there, thanks for the post.
    Here’s a cool customisable and embedable player:
    Peckplayer: http://www.scopart.fr/peckplayer/
    cheers :-)

  • http://www.ashitsarkar.co.nr Ashit Sarkar

    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.

  • http://designshack.co.uk/articles/html/four-quick-and-easy-ways-to-embed-mp3-files-into-your-site?& Brigham

    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.

  • http://www.designaeon.com/ raman

    Tnx those were helpufl,,but i am lookign for a Player with dynamic playlist,,that is load playlist links from my sql database,,,,,any help would be appreciated,,,
    tnxx

  • http://www.sandiegozooglobal.org/member/398498/ escort in Kiev

    have already been pursuing ur blog site all-around some times. completely appreciate a person’s posts. moreover i’m going to often be executing analysis about that topic. did you know another great websites or simply on the web discussion boards where I’d acquire additional? a lot of thanks a lot.

  • http://backlinksvijay.blogspot.com vijay

    Thanks for your post. its very important for me. your yahoo player coding is very easy to learn.

    Thanks again

  • mausr

    nursingstudent78 Nov 15, 09, 12:54PM | #23
    Joined: Nov 13, 09
    Threads: 3
    Posts: 33

    *advice
    lauraabc Nov 16, 09, 11:26AM | #24
    Joined: Nov 16, 09
    Threads: 1
    Posts: 2

    do you know of any other site that is actually ligit??
    pheelyks Nov 16, 09, 02:06PM | #25

    Recommendations aren’t allowed on this forum.
    rustyironchains Nov 16, 09, 03:35PM | #26
    Joined: Jun 15, 09
    Threads: 14
    Posts: 855

    have you all gone mad, or is it just that it’s the busy season, and none of you are real writers?

    as I am a writer stopping here as a break under my crushing workload, please let me ramble a bit.

    this is obviously one of those sweat-hog busybody customers that writers love to hate, and you’re practically kowtowing to them. why don’t you offer them an iced tea and a hamburger?

    the writer didn’t use contractions in an informal email on a tagline thread? boo hoo! what was the paper like? what was the paper like? …nothing.

    this is “one of those,” people! it’s the 5th revision with all new instructions! it’s the “I did it half myself already!” it’s the “I’m not satisifed with anything you did, because you forgot to put a page number in the quotes!” it’s “this essay, although it follows all of my instructions, is simply unsatisfactory…”

    no contractions or comma in an email, pssht. go **** yourself!

    what are you people, ******* blind?

    hey nursingstudent! I hope you get your identity stolen! you fraud.
    nursingstudent78 Nov 16, 09, 09:31PM | #27
    Joined: Nov 13, 09
    Threads: 3
    Posts: 33

    Sounds like you’re used to complaints everyday, huh? You are very well versed in them, so looks like you must be.

    So, Mr. Supposed “professional” writer, you are telling me that when you send an e-mail/comment/post/whatever to a client that you do not even Attempt to use the skills that you were educated for? AT the VERY least he should of tried to make a good first impression seeing as how it was the FIRST contact I had with this writer. YOU NEVER GET A SECOND CHANCE TO MAKE A FIRST IMPRESSION…….Remember that Rusty. ;)….maybe you will improve YOUR customer satisfaction by keeping that in mind.

    Try it, I Promise it will work (it should also get that corn cob out that’s been stuck up your as*!)
    rustyironchains Nov 17, 09, 03:55PM | #28
    Joined: Jun 15, 09
    Threads: 14
    Posts: 855

    nursingstudent– let me know when you’re working in the real world, and someone comes into the ER, and you don’t know what the **** you’re doing, because you cheated your way through nursing school. how do you live with yourself? believe me, if I ever need a corncob removed, you’ll be the last one I’ll have talking to me about that. every time I do a paper for a dumb *** nurse who is too busy, ignorant, lazy, or incomprehensible to do their own school work, I shudder and cross my fingers for karma to be kind.

    sorry, was that missing a comma?

    btw, grammarian, “mislead” is not the proper correct past form of the verb; it’s “misled.” you dumb ****. I’d pay to see the half paper you’ve written, in the same way I pay Netflix to send me South Park season 6.

    and when I write emails, it’s with the same speedy disregard for conventional rules of grammar and punctuation that everyone else uses, except for tools like you.

    you know what I think? I think you got scared and backed out.

    btw, I don’t get many complaints– I write a lot of papers. and when you write a lot of papers, you run into some real officious, crazy, dumb ***** like you, because they are a dime a dozen.
    nursingstudent78 Nov 17, 09, 05:39PM | #29
    Joined: Nov 13, 09
    Threads: 3
    Posts: 33

    Why are you so disgruntled? I only assumed it was because you had a corn cob up your butt. It is obviously a much deeper problem than that.

    In regards to you pointing out my improper use of the word “mislead”, I openly admit that I am not a grammarian, so why would you even refer to me as one? DUH! Looks like you are the dumba** if that is the ONLY thing you could find wrong in ANY of my text. I’m sure there are many more errors, but I don’t think me being able to spell “misled” will affect my nursing skills; i also highly doubt me using a template to help me on an English Lit essay would affect those skills either. STUPID.

    If you would do your RESEARCH before you lash out at me you would see that I had an unforeseeable circumstance get in my way. Therefore getting help was completely justified, besides, you are ASSuming (pun intended for your slow brain) that I am a cheater when in fact I am not. You clearly have some moral issues; if you don’t like what you do for a living then do something else! Simple as that!

    PS..member what I said earlier cry baby, You never get a second chance to make a first impression!
    nursingstudent78 Nov 17, 09, 05:52PM | #30
    Joined: Nov 13, 09
    Threads: 3
    Posts: 33

    Another thing I forgot to add….

    ANY email you send to a potential/existing client is and should be in a formal format. No if, ands, or butts about it! DUH you are a “Writer”. Get it? If not let me spell it out for you:

    Writer= writer

    If that is how you conduct your business, you know, carelessly (as you profess), then I can only feel sorry for you…..no, wait, not you! Your clients!
    rustyironchains Nov 17, 09, 10:33PM | #31
    Joined: Jun 15, 09
    Threads: 14
    Posts: 855

    scared to proceed… you didn’t even read the paper. cold-footed and useless. I don’t care how many caps you use, pig, or if you use the lowercase i (it fits you somehow, because it makes you look retarded). I called you a grammarian because you are obviously so anal retentive about your writer’s email etiquette re: punctuation and contractions, that I figured you must be some kind of grammarian.

    anyway, the bottom line is, you didn’t even have a chance to drag some poor overworked writer over the edge during the height of busy season with your endless demands– and some shady ex Eastern Bloc internet gangsters got your credit card number, name, and who knows what else. who’s the dumb***, again?
    nursingstudent78 Nov 18, 09, 12:24AM | #32
    Joined: Nov 13, 09
    Threads: 3
    Posts: 33

    rustyironchains:
    anyway, the bottom line is, you didn’t even have a chance to drag some poor overworked writer over the edge during the height of busy season

    Would that have been the better thing to do?

    rustyironchains:
    with your endless demands

    And that part of your sentence proves you delusional. What have I “endlessly demanded”? Umm nothing. I do demand, however, that you take a vacation. You need one CornCobBoy.

    rustyironchains:
    and some shady ex Eastern Bloc internet gangsters got your credit card number, name, and who knows what else. who’s the dumb***, again?

    And THAT one just reinforces my diagnosis of your delusional state. Did you forget to take your meds today CornCobBoy?? Or maybe you just need to buy a video and give yourself some stress relief *if you know what I mean*….Judging by your character, I’m pretty sure you wouldn’t have any other recourse.
    rustyironchains Nov 18, 09, 07:24AM | #33
    Joined: Jun 15, 09
    Threads: 14
    Posts: 855

    you’re right– I do need to get laid, and I do need a vacation. what’s your excuse? here you are, a fake nurse who pays people to do their homework. those are the grounds you stand on. and you’re going to judge me? please.

    PS– nobody buys porn at stores anymore. if you’re going to use these 14 year old insults, at least try to stay current.
    nursingstudent78 Nov 18, 09, 03:04PM | #34
    Joined: Nov 13, 09
    Threads: 3
    Posts: 33

    I don’t need an excuse..I’m not the one telling people “I hope you get your identity stolen! you fraud.” That was just downright mean. :( Sorry if I touched a soft spot on you, but you didn’t need to act like a 14 year old first!

    rustyironchains:
    a fake nurse who pays people to do their homework

    I’m not even a nurse, therefore, no chance of being fake or real. Never said I was. Or can’t you read the SN, CornCobBoy? That sentence didn’t even make sense anyway!! their=your??

    You are a hoot! LOL
    If you could read, you would see that I didn’t specify at a “store”. I just said buy a video. You know, download one! (I figured you probably couldn’t fit out your front door anymore)
    rustyironchains Nov 18, 09, 03:59PM | #35
    Joined: Jun 15, 09
    Threads: 14
    Posts: 855

    come to think of it, that combination of foolishness and officiousness, and that lack of gratitude and bossiness… I should have known– a hospital administrator! that’s even worse…
    nursingstudent78 Nov 18, 09, 07:13PM | #36
    Joined: Nov 13, 09
    Threads: 3
    Posts: 33

    Wrong again CornCob!! THAT is your comeback? *yawn* Now you are just boring me.
    Hey why this vendetta against me? Were you the writer that got shot down by me?

    If so, I deeply apologize; I feel really, really SORRY for your incompetent butt!

    Now shoo fly, don’t bother me.
    rustyironchains Nov 18, 09, 08:59PM | #37
    Joined: Jun 15, 09
    Threads: 14
    Posts: 855

    have a nice life, cow.
    rustyironchains Nov 18, 09, 09:01PM | #38
    Joined: Jun 15, 09
    Threads: 14
    Posts: 855

    I hope you choke on a ****.
    nursingstudent78 Nov 18, 09, 09:14PM | #39
    Joined: Nov 13, 09
    Threads: 3
    Posts: 33

    rustyironchains:
    I hope you choke on a ****.

    I hope I do too, CornCob!
    J_richardson Dec 8, 09, 11:11AM | #40
    Joined: Dec 7, 09
    Posts: 20

    Thanks God my friend told me about this web sute and I found are cheaters

Subscribe
Membership
About the Author