Wordpress & Web Development

3 Different Ways To Embed A Free MP3 Player On Your Website

Jessica Cam Wong 18-01-2011

embed mp3 playerWebsite owners should rejoice now that there’s more support than ever to embed codes for almost anything, chat widgets, call widgets, etc. If you need an MP3 player, you could search for widgets on sites like Widgetbox Blidgets - How To Create Widgets That Promote Your Blog Read More , or you could keep reading as we’ve gathered a collection of easy ways to embed MP3s. If you own a website, I assume you know a bit of HTML, which you’ll see a lot of in this article.


There are 3 players you can use to embed MP3s. First, we’ll discuss what to use for single MP3s that you’re hosting. For additional MP3 files, you can either use the Yahoo! Media Player, which will detect all MP3 links and display them in a player for the website visitor to play or browse. If you’re building playlists of MP3 files, then the third method to embed an MP3 player should suit your needs, although it comes with longer codes than the previous two.

Google Reader Podcast Player For Single MP3s

The Digital Inspiration blog has the details on embedding MP3 files with the Google Player, but to summarize the article, you just have to insert this code, replacing “MP3URL” with the correct URL of the MP3 file hosted on the web that you want to embed in your index.html file that hosts the main page:

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

While this player is very simple in appearance, it doesn’t carry the Google logo, it even has volume controls and is probably one of the easiest ways to embed an MP3 player working fast.

embed mp3 player


Yahoo Media Player For Any MP3 URL On A Page

So let’s say you already have a bunch of MP3 files listed on your webpage and you just need a player. Instead of inserting the Google player code for each and every one of those MP3s, you could just use the handy [NO LONGER WORKS] Yahoo Media Player.

embed mp3

As long as you have linked to those MP3 files in your webpage, you can use the following code to include the Yahoo Media Player, which will detect the MP3 files and display the play buttons next to each MP3 file.

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

With that one line of HTML, you get a floating media player that can play all the MP3 files in one webpage.


embed mp3

JW FLV Player For Playlists

The JW Player is an open-source player for non-commercial use. You can download the player, which comes with a few more files, namely swfobject.js and player.swf, all of which you’ll upload to the same location where your website is. Having the JW Player for playlists means you’ll need to insert code in your index.html page and also have a separate XML file with the track list, which really isn’t that hard to put together.

First, you’ll need to insert the following code on your index.html page:

<script type=’text/javascript’ src=’URLofSWFOBJECT.JS’></script>

<div id=’mediaspace’>This text will be replaced</div>

<script type=’text/javascript’>
var so = new SWFObject(‘URLofPLAYER.SWF’,’mpl’,’470′,’320′,’9′);

The items in bold are the ones you need to replace with the correct URLs of the object, player, and XML file (URLofSWFOBJECT.JS, URLofPLAYER.SWF, URLofPLAYLISTFILE.XML). If this code doesn’t show anything on your page, try this code that’s meant to embed MP3 players in blogs and sites like MySpace:

<object classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′ width=’470′ height=’300′ id=’single1′ name=’single1′>
<param name=’movie’ value=’URLofPLAYER.SWF‘>
<param name=’allowfullscreen’ value=’true’>
<param name=’allowscriptaccess’ value=’always’>
<param name=’wmode’ value=’transparent’>
<param name=’flashvars’ value=’playlistfile=URLofPLAYLISTFILE.XML&playlist=left&dock=false’>

As for the XML file, all you need to do is to save a file with the XML file extension using Notepad in Windows or any text editor. If you’re using Notepad, make sure in the Save type as field has “All Files (*.*)”. Inside the XML file, paste this and replace bold items with the appropriate entries:

<?xml version=”1.0″ encoding=”UTF-8″?>
<playlist version=”1″ xmlns=”http://xspf.org/ns/0/”>
<title>Your MP3 Playlist</title>







You can add more tracks if you want with the


tag, just make sure you adjust the height of the player accordingly. This is what the player looks like with the playlist on the left.

embed mp3


To customize the color of the player, head over to the setup page from the official JW Player website. This setup page will also let you input your desired player parameters (e.g. whether to autoplay or not) and preview the results, while you don’t even have to figure out the code as it painlessly spits out the code for you to just copy.

how embed mp3 website

Not only does this awesome, free player take care of an entire playlist, it also can play single MP3 files. You’d only need to insert this code in your index.html file:

<script type=’text/javascript’ src=’PATHtoSWFOBJECT.JS‘></script>

<div id=’mediaspace’>This text will be replaced</div>

<script type=’text/javascript’>
var so = new SWFObject(‘URLofPLAYER.SWF‘,’ply’,’470′,’24’,’9′,’#000000′);

You should also input the duration of the MP3 file, or you can also omit that line altogether.

If you would rather not mess with codes and would rather just copy and paste embed codes without having to modify them, you can always upload single MP3 to an online storage site, such as 4shared and Box.net, which offer embed codes for MP3 files.

how embed mp3 website

embed mp3 player

Did I miss an MP3 player that’s available for free? Let us know in the comments!

Image Credit: Box.net

Related topics: Media Player, MP3, Webmaster Tools.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Charmain
    May 20, 2017 at 8:14 pm

    NEW!! Super Crossbar Challenge Cheats NEW!!
    Super Crossbar Challenge Hack tool for UNLIMITED COINS! Get Super Crossbar Challenge Hack for Androidand iOS best!

    DOWNLOAD LINK: Super Crossbar Challenge Cheats

  2. Wrervaria
    January 28, 2017 at 9:16 am


  3. bitter sweet life
    January 27, 2011 at 1:28 am

    Is it also possible to embed this on blogspot?

    • Jessica Cam W.
      January 27, 2011 at 1:41 am

      I think the Grooveshark and Box.net ones should. I haven't tried the JW or Google players though.

      • bitter sweet life
        January 28, 2011 at 8:07 am

        Thanks jessica! I'm going to try that on my blog. I will tell you once I embed it already. :)

  4. Jessica Cam W.
    January 27, 2011 at 2:41 am

    I think the Grooveshark and Box.net ones should. I haven't tried the JW or Google players though.

  5. Jessica Cam W.
    January 27, 2011 at 2:39 am

    I just tried using Grooveshark widgets and Box.net embed codes. Both worked fine.

  6. Ammon
    January 21, 2011 at 5:56 pm

    Is there an option for those of us running on WordPress.com blogs? We typically can't use embed tags or javascript.

    • Jessica Cam W.
      January 27, 2011 at 1:39 am

      I just tried using Grooveshark widgets and Box.net embed codes. Both worked fine.

  7. Ammon
    January 21, 2011 at 6:56 pm

    Is there an option for those of us running on WordPress.com blogs? We typically can't use embed tags or javascript.

  8. Jessica Cam W.
    January 20, 2011 at 10:50 pm

    Oh, how can I forget about Grooveshark?! Thanks for the observation!

  9. Aibek
    January 20, 2011 at 6:52 pm

    looks pretty good, thanks for share

    • Jessica Cam W.
      January 20, 2011 at 10:51 pm

      Thanks for the suggestion! Open-source anything is always appreciated.

  10. Aibek
    January 20, 2011 at 6:51 pm

    thanks for the input

  11. wot
    January 19, 2011 at 7:06 pm
  12. Dan
    January 18, 2011 at 10:37 pm

    I prefer the tag in HTML5. Minimalist and doesn't require a plugin, but does require a new browser.

    • Jessica Cam W.
      January 18, 2011 at 11:56 pm

      Good tip. Thanks for the input!