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!
