Four Quick and Easy Ways to Embed MP3 Files Into Your Site
Once upon a time I was in a rock band. When I was building our website, I naturally wanted to put some music up so visitors could listen before purchasing our songs on iTunes. After a bit of research I found out that there are a million ways you could go about it, some better than others. Sadly, after two albums and lots of good times, my band The Van Buren Regulars no longer exists. Fortunately, what I learned about embedding music lives on and is easy enough to pass along.
Today we’re going to look at four easy ways to embed MP3 files into your website. All of these methods are free and take mere minutes to implement. Let’s check them out!
Get unlimited downloads of 1 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Landing Pages & Email
Logos, Print & Mockups
Shopify, Tumblr & More
Themes & Plugins
Sans Serif, Script & More
Icons, Vectors & More
Simple Player with Editable Parameters
Using an object tag, we can create our own little player with a few lines of code. Paste the code below into your page and insert the link to your MP3. Then you can customize options like height, width, background color, loop, and autoplay.
Source: O’Reilly Media
<object width="300" height="42">
<param name="src" value="LINKHERE">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#FFFFFF">
<embed src="LINKHERE" autostart="false" loop="false" width="300" height="42"
Here’s the player that results (may take a minute to load):
Google Reader MP3 Player
I’m sure you wouldn’t be surprised to know that Google has a free resource that suits this problem perfectly. To use the Google Reader MP3 player, simply paste the following code into your page and point the “audioURL” at your MP3 file.
audioUrl=http://LINK" width="400" height="27"
allowscriptaccess="never" quality="best" bgcolor="#ffffff"
wmode="window" flashvars="playerMode=embedded" />
Here’s a sample:
Here’s a shot of the other skins you can use:
MixPod is just one of many providers of free flash players you can embed into your site. Check out this post over at CNET for list of good ones.
This post is a little on the short side but that’s because embedding music has really become super easy. All of the players above offer you simple, copy and paste solutions to putting MP3s on your site. The player you should go with depends entirely upon the way you want to use it. Sometimes you just want something as minimal as possible while other times you want a flashy, animated player your viewers can’t miss. Personally, I love the skins and functionality available on the MixPod players. However, only the Yahoo offers that great floating feature so the player stays with you and can be turned off or manipulated at any time. leave a comment below to let us know how you embed MP3s into your sites or which of these options you like best.