blogger visitor
Le Blog de Sushi: How to make your own music player for your blog or site

Thursday, December 03, 2009

{ How to make your own music player for your blog or site }

Difficulty: Medium.
Assumed knowledge: None.

This tutorial was requested by XANABIOTICX and explains how to create your own music player for your blog or website using a little JavaScript and HTML. A finished version can be seen below with an accompanying album cover.












Choose the MP3 track that you want to use, and download audio-player.js and player.swf (right click and 'Save Link As'). You will need to host all three files on a server. You can either use your internet provider's server or a free webhosting site, such as 000webhost.com. Once you have signed up to a host, you will need to upload the files either by FTP or 000webhost.com's file manager.



If you are using your own server and FTP you can skip this step. To upload via 000webhost.com's file manager, login to the site and click 'Go to CPanel'. Click on the 'Another File Manager' link.



A new window will open up that is styled to look similar to a windows folder. Double click on the 'public_html' folder. Under 'File and Folder Tasks' click 'Create Directory', enter 'audio' as the folder name, then click 'ok'.




Double click on the 'audio' folder that has just been created. Under File and Folder Tasks' again, click 'Upload File': locate and upload your MP3 music file, audio-player.js and player.swf files.





Now that you have the three files uploaded, go to the blog/website/sidebar where you want to place the music player. Copy & paste the following code:

<*script language="JavaScript" src="http://yoursite.com/audio/audio-player.js">
<*object id="audioplayer1" data="http://yoursite.com/audio/player.swf" type="application/x-shockwave-flash" width="260" height="24">
<*param value="http://yoursite.com/audio/player.swf" name="movie">
<*param value="playerID=1&soundFile=http://yoursite.com/audio/audioname.mp3" name="FlashVars">
<*param value="high" name="quality">
<*param value="false" name="menu">
<*param value="transparent" name="wmode">
<*/object>

You will need to remove all the red asterisks and replace the four instances of yoursite.com with your host's address. The width of the music player can be adjusted by changing the '260' to the desired length (in pixels). You will also need to replace audioname with the name of your MP3 file.

If you are unsure of your 000webhost.com address, go to the main page and use the full web address that appears under 'List of your domains'.





Save your blogpost/sidebar/website page. If you have followed the steps correctly, the audio player will function like the example one in this post and play your track. If you get stuck or come across any errors leave a comment!

If you also want to add an album cover or accompanying image above the music player, upload the image to your host or Photobucket account and add the following code:

<*img src="http:yourhost.com/image1.jpg" />

Remove the red asterisks and replace the bold text with the web address of your image.

12 comments | How to make your own music player for your blog or site

Dylana said...
on

Thanks for this!

colormenana.blogspot.com

Reply
XANABIOTICX said...
on

holla, sushi love!
i can't thank you enough for this tutorial. :)
you made it sound so easy, i can't wait to try it. hope everyone will benefit from this tutorial. thanks again. have fun!

Reply
Cookie said...
on

great post, thanks:)

xo

Reply
michelle_ said...
on

thanks for this tip !
SCARF GIVEAWAY STILL ON CLICK TO JOIN

visit / follow / and comment me .
xoxo . Glisters & Blisters

Reply
Annie =) said...
on

this was sooooo helpful! thanks a bunch x

Reply
soph (owl vs. dove) said...
on

Oh thanks for posting this. I was just wondering how to do this, funnily enough!

xx

Reply
Alicia - Sea Of Ghosts said...
on

This sounded really great so I just went to make an account with 000webhost.com and found:

"We do not allow any type of programs, software, or MP3 files on our server unless you are the full owner and have all rights to the file."

in their TOS. :(

Reply
Sushi said...
on

Alicia - Sea of Ghosts - Thanks for letting me know, I must have completely missed that! I will keep an eye out for another host that allows MP3 files but in the mean time you can always use your own server or take your chances with 000webhost.com (I have been hosting my MP3 files on there for at least half a year with no problems) x Sushi

Reply
Cafe Fashionista said...
on

I just found your blog via Snapshot Fashion. What an amazing tutorial - you so rock for posting this! :)

Reply
Amie said...
on

great tutorial! i usually don't like music on blogs especially if it plays automatically or without the choice of being turned off, but this is a great feature :)

Reply
Ana Jonessy said...
on
This comment has been removed by the author.
Reply
Ana Jonessy said...
on
This comment has been removed by the author.
Reply

Post a Comment