HOW TO: Add a Music Player to Your Site

Friday 3/12/10 - Heikki @Moogo

Share

Recently – and in the not-so-distant past – we've been receiving a fair deal of questions about if it's possible to add a music player to your site. We of course wish to provide you gals an gents an answer to every question, and this case is no different. So, what's the answer? In short: heck yes! And instead of writing every curious mind a personal mini tutorial, why not make the matter public, and write a full-blown (slightly over exaggerating here) here's-how-to-do-it for all to see.

The web is of course sprawling with a myriad of different widgets, games and thingamajigs, and mp3 players are no different. Some players are more advanced, as others are more basic. There's an alternative out there for everyone. To implement them you need a bit of HTML knowledge. If this sounds difficult to you, don't fret! It's easier than you think.

The player I picked is the most basic of them all. It creates a simple play icon your site and if a vistor clicks it the audio file will start to play. You can set it on auto-play and on repeat and >select a different size icon. But what's really useful is the fact that it generates the HTML code you need automatically, so you don't have to do essentially anything but to fill in the blanks. There are more complex and customizable players out there, but it's good to start off with the basics. So let's get it on like Marvin Gaye.

 

 

 

Head over to http://www.strangecube.com/audioplay/. Scroll down a bit, until you see how to use the audioplay player.

The first thing it asks for is the URL of the mp3 file you wish to play on your site. You can upload your own mp3 files from your computer to your Moogo website. Don't know how to do it? No worries, I'll explain.

You can upload mp3 or any other files to your site by using the 'file browser', which you can find under the 'site management' tab. Once in the 'file browser' you can create a new folder called 'music' for example (I have done so to illustrate this example but you can name it whatever you want) or you can just upload the mp3 in the 'files' directory, which is the root directory (the one you end up in when opening the 'file browser').

Once you have created the folder, or picked any existing one, you need to click on 'browse' in the top right-hand corner. Then locate file on your computer, click 'open' and then 'send'.Wait for the upload to finish, and Voilà ! Your song has now been upload. But what is the URL of the file?

With my example (if the file was uploaded to the 'music' directory) the address of the file is: http://app.moogo.com/files/yoursite.moogo.com/music/file.mp3. Naturally you have to replace 'yoursite' with the name of your site, and 'file' with the name of the mp3 you uploaded.

You can edit the file name in 'file browser'. Remember: if you have any spacebar strokes, hyphens etc., Moogo will automatically convert them to underscores. The direct link will look like this: http://app.moogo.com/files/yoursite.moogo.com/music/artist_title.mp3. Once you have the URL of your file copied, paste that into the URL of mp3 file: (with http://) field.

 

Next up you can tick certain boxes to enable features for the player.

• Autostart: the song will play automatically when a visitor comes to your site. A word of caution, because most people might find it annoying that there's music playing on the site automatically.

• Play stops/pauses other players: if the visitor is listening to music on his/her computer, this feature pauses it. This is something that visitors might find annoying as well.

• Repeat: you can set how many times the song plays on your site.

• Player mode: you can choose which buttons the player will display:

  • play and pause

  • play and stop

• Button style: you can select from four options how the button looks like

Once you are done selecting the features and the look of your player, hit the 'generate code' button, and you will notice a string of code appear in the box next to it. The code that it generates is what you have to copy-paste to your website. Now that you have the code all ready, where should you put it?

The best place probably feature the player is on the right-hand side of your website. Of course this isn't the only place where you can put it, as you can insert it anywhere on your site by clicking the 'HTML' icon in located on the right-hand side of the editor. In this example though, a content block is the most useful place where to put it. Want to know how to add a content block? Read on then.

Click on the 'site management' menu tab, and this will open a new menu page for you. On this page, click on the 'page layout and structure' link. Once you're there, you can add a content block to your site. From the 'add content block' drop-down menu, select 'contact information'. Once it has been added, you can decide whether to display it on the right or the left side of the website. Once you've made your mind up, click 'save changes'. Then go back to your editing your site by clicking the 'content editing' link in the top-left corner. Now the block has appeared on your frontpage.

Move your cursor over the block, and click the lightning bolt icon to edit the contents. You should probably change the header of the block, which now says 'contact information'. You can type in 'music player' or anything that comes to mind. The field below the header is where you need to paste the HTML code that was generated. Just paste the code in there and click 'save'. Congrats, you have just put an mp3 on to your site!

A single mp3 is not enough? Want to have your own playlist? More chic design? Check these options out. Both sites feature instructions how to do it, so that you won't feel lost.

http://flash-mp3-player.net/

http://www.premiumbeat.com/flash_resources/free_flash_music_player/