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

intro2   3 Different Ways To Embed A Free MP3 Player On Your WebsiteWebsite 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, 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.

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

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.

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

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.

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

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.

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

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.

3.11   3 Different Ways To Embed A Free MP3 Player On Your 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′);
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.

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

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

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

Image Credit: Box.net

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

16 Comments -

0 votes

Dan

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

0 votes

Jessica Cam W.

Good tip. Thanks for the input!

0 votes

Frank

http://widgets.grooveshark.com/
You can choose either a single song or multi-track player and use any tune from the vast Grooveshark library. If they don’t have the track you need, upload it.

0 votes

Aibek

thanks for the input

0 votes

Jessica Cam W.

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

0 votes
0 votes

Aibek

looks pretty good, thanks for share

0 votes

Jessica Cam W.

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

0 votes

Ammon

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

0 votes

Ammon

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

0 votes

Jessica Cam W.

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

0 votes

Jessica Cam W.

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

0 votes

Jessica Cam W.

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

0 votes

bitter sweet life

Is it also possible to embed this on blogspot?

0 votes

Jessica Cam W.

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

0 votes

bitter sweet life

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