Wednesday, February 24, 2010

Tips & Tricks :: Creating an Embeddable MP3 Player For Your Website or Blogue

I've been using embeddable players {mainly Grooveshark} to insert music into my blogues, but every so often I'm thwarted by what's in the catalogue.  Here's a fairly painless way to set up your own player, which uses two sites, OpenDrive and Mixpod, for storing and playing the files, respectively. Bear in mind that if either goes under, your player won't work.

First, you'll need webspace for your MP3 files. I have my own on the Rhizomicon.com domain, but if you don't try OpenDrive. It gives you 5Gb for free. Create an account and upload your MP3s.

On OpenDrive, I uploaded a Skingerbreadman track from Officer M., a punk band from Winnipeg with funk and polka overtones. Here's what the interface looks like after you're done::


Note the "Full (download)" links on the right. Those are important.

The next step is setting up an account on Mixpod, which is painless. Mixpod player widgits can be used for an individual track or a playlist on anywhere that allows the placement of embeddable code. Sign up for Mixpod and go to "Create a Playlist" tab.







After clicking on the "Create a Music Playlist" tab, click on the "Add URL" tab. Fill in the information. When creating the playlist, make sure to use the full download link on OpenDrive that has the MP3 suffix or else Mixpod will balk, asking for a valid address.


I made a mistake under the brand name adding an extra "k" in Skingerbreadman. No worries, you can go back and edit if you see mistakes on the player. Under "Customize" you can also edit the player skin, colours, and features of the player. I chose an old-school cassette tape skin::




You can also choose colours, but I didn't fuss with it. The settings can also be set, such as autoplay, shuffle, loop, privacy, and volume. When you're done customizing, click on the "SAVE (Get Code)" button. Click on the tab corresponding to the site you're using. I'm on Blogger, so I clicked on that tab, but the code created is generic::


Copy the embed code and paste it in your blog. You're done {See Below}.


Twitterversion:: #Tips&Tricks blog on creating embeddable player for your blog/website fr.your own MP3s. How to w/Skingerbreadman example. @Prof_K








No comments: