MP3 Player Widget 1.1

I have posted earlier an MP3 Player Widget for Blogger Blog [See This] which optionally hides the MP3 Download Link and replaces with a Player [See Demo Here]. Now I have modified the widget so that you can customize the player’s colour, Play and Stop Icons according to your Blog Template.

Code for this widget are based on various hacks of excellent scripts- Del.icio.us mp3 Playtagger javascript which has been modified for blogger.

How to Install this Widget:

  • Customize the player using the “Mp3 Player Widget Generator form” Given Below. If you don’t do this, widget will take default values.
  • Refer to the image given below for identifying different parts of the player. To change the colour values, click on the colour field in the form, a colour palette will popup where you can choose colour.
  • You may preview the sustomized player by clicking on the “Player Preview” Button.
  • Now click the “Apply” Button and then “Widget on Your Blog” button. A new window will open up which will take you to the blogger. If you are not already signed in to blogger, it will prompt you to “sign in”. Sign in there.
  • After this you “Add Page Element” Page will open. Now select your blog and click on button “Add Widget”.
  • Now a page element will get added in you blog, now If you want, you may change the location of “WAQI MP3 Player” Widget.
    [This completes widget installation]

How to make the Player appear in your Post:

  • Insert a keyword (e.g. MP301) in your post where you want the player to appear.
  • Select this keyword and hyperlink it to some desired mp3 file link which you have already uploaded somewhere on the web (There are so many file hosting services which offer free file hosting. E.g. Boxstr where you can upload your mp3 file and get the link) . Hyperlink must be a direct link like http://www.abc.com/PathToMp3File/Myfile.mp3 (e.g. http://waqidisk.googlepages.com/waqi_music.mp3)
  • If you are working in HTML mode you can do the same by adding the following code where you want the palyer to appear.
    <a href="http://www.abc.com/PathToMp3File/MyFile.mp3">MP301</a> 
  • [See Demo Here]



If you find bug, please comment so that I can make this widget better. If you want some help regarding this, you are welcome here.

5 comments:

Sugeeth said...

Thanks a lot Waqar. Your blog is very useful.

Brian said...

I like it, just wondering how to change the background from white? I am trying to use it on a page with a non-white background and, when hidden, there is always a white box around it. This does not seem to be controlled by the parameters

Waqar Ahmad said...

Hello Brijan, sorry for the late reply.
I am trying to locate for that option inside the source code. Very soon, I'll be writing about player Background color customization. Just stay tuned.. Thanks

Waqar Ahmad said...

Hello Brijan.. Player Page Background is already set to transparent, so that it will adapt any page background color..
See this blog with a black background page..
http://waqar-demo.blogspot.com/2009/08/waqi-mp3-player-widget-demo.html
If you have any problem then comment here. I'll reply. I don't think there will be any problem. can you lease send me the link where you are using this widget..

Saleem Khan said...

great!!!

saleem
9838659380

Post a Comment

If you like this post, Please do comment..