Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.
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:
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 [NO LONGER WORKS] 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 play buttons next to each MP3 file.
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:
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:
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:
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.
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:
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!
Image Credit: Box.net