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

links

HTML Audio

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:

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.

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 Yahoo Media Player.

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

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′);
so.addParam(‘allowfullscreen’,'true’);
so.addParam(‘allowscriptaccess’,'always’);
so.addParam(‘wmode’,'opaque’);
so.addVariable(‘playlistfile’,’URLofPLAYLISTFILE.XML‘);
so.addVariable(‘playlist’,'left’);
so.write(‘mediaspace’);
</script>

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’>
<embed
type=’application/x-shockwave-flash’
id=’single2′
name=’single2′
src=’URLofPLAYER.SWF‘
width=’470′
height=’300′
bgcolor=’undefined’
allowscriptaccess=’always’
allowfullscreen=’true’
wmode=’transparent’
flashvars=’playlistfile=URLofPLAYLISTFILE.XML&playlist=left&dock=false’
/>
</object>

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>
<info>http://YourWebpageHere/</info>

<trackList>

<track>
<title>NAMEofMP3file1</title>
<location>URLofMP3file1.MP3</location>
</track>

<track>
<title>NAMEofMP3file2</title>
<location>URLofMP3file2.MP3</location>
</track>

<track>
<title>NAMEofMP3file3</title>
<location>URLofMP3file2.MP3</location>
</track>

</trackList>

</playlist>

You can add more tracks if you want with the

<track>

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.

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.

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′);
so.addParam(‘allowfullscreen’,'true’);
so.addParam(‘allowscriptaccess’,'always’);
so.addParam(‘wmode’,'opaque’);
so.addVariable(‘file’,’MP3URL‘);
so.addVariable(‘duration’,’DURATION‘);
so.write(‘mediaspace’);
</script>

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.

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