Home

[ Sample players ]
[ Skin Options ]



Allwebco Design Corporation

Flash xmp3mini add-on setup:
This Flash application is intended to be added to any website or any website template.

View support and options for this add-on.

View Allwebco add-ons.


STEP #1: COPY FILES | More Details
Unzip the "xmp3mini.zip" file and place the "xmp3Player-mini" folder and all files and subdirectories in this zip file in your main template or website folder. Place the 3 HTML pages in this zip file in your main template folder.


STEP #2: TEST PLAYER
The "xmp3mini-samples.htm" page should now be in your main template or website folder with your other HTML pages. Click here to open the "xmp3mini-samples.htm" to test the players.


STEP #3: ADD WEBSITE CODE
Here are 3 options to add the first xmp3mini player to any website or template webpage:

CODE FOR ANY HTML PAGE:
To add the xmp3mini player to the "body" area of any HTML page: Select and copy the following code in the box below. Paste this into any HTML document. This code should go after the html page "BODY" tag. Click to view sample page.




FLOATING DIV CODE FOR ANY HTML PAGE: | Click for info on DIV code
To add the xmp3mini player floating on the "body" area of any HTML page: Select and copy the following code in the box below. Paste this into any HTML document. This code should go after the html page "BODY" tag. Click to view sample page.




CODE FOR ANY .js FILE:
To add the xmp3mini player to any .js file like the menu.js or sidebar.js: Select and copy the following code in the box below. Paste this into any .js file.





STEP #4: EDIT PLAYER COLOR | More Details
This download includes 12 color skins. To change to another color for your player, edit the "player-1.js" and replace the word "RED" in 2 places with another color. Use all capital letters for the color name. Colors you can use:

BLACK
BLUE
CHROME
GOLD
GRAY
GREEN
ORANGE
PURPLE
RED
SILVER
TEAL
YELLOW


You should also edit the background color for your player. Edit the "FF0000" in the "player-1.js" with another hex color. Click to view other HEX colors.

View sample players | View skin files


STEP #5: PREPARE AUDIO FILES | mp3 conversion help
Replace the "song-1.mp3" in the "xmp3Player-mini" folder with your .mp3 sound file. Test the player you have added from the steps above by opening your HTML page. Make sure your song is now being played in the player you added.


STEP #6: SET THE AUTOSTART | More Details
Any player you add can be set to either not start the song when your page loads or to autostart the mp3 file. You can edit the "player-1.js" to change this. Edit the "var autostart" to either a number "1" or a number "0". Using "1" will start the song when your page loads.


STEP #7: ADDING THE NEXT PLAYER
You can add as many players as you would like to your website. Do the steps above for the "player-2.js" through "player-12.js" to have 12 players. In the code you will add in step #3 edit the "player-1.js" area to "player-2.js" when you add the code. See options below to add more than 12 players.


STEP #8: CHECK YOUR WORK
Open the page that you added the code from the steps above in your web browser, the player should now be working.


STEP #9: UPLOADING | FTP Help
We you upload to your hosting area be sure to upload the entire "xmp3Player-mini" folder and all files and subdirectories in this folder. You do not need to upload the 3 HTML help pages or the "extras" folder.



OPTIONS:

Adding more than 12 players: | More Details
To add a new player, in the "xmp3Player-mini" folder, make a copy of any "player-?.js" file. Rename that to "player-13.js" and create a new .mp3 file named "song-13.mp3". Edit the "player-13.js" and change the "var song_name" at the top of the file to "song-13". Do the steps above to add the new player 13.

Changing the player to other colors:
See step #4 above. Also see the xmp3mini support and options page.

Using the included skins:
Click here for instructions and to view all skin files.

Making your own skins:
You can create your own custom player skin and play, playing, pause and stop buttons. New skins will go in the "xmp3Player-mini\skins" folder inside a color folder you create. A new text file will need to be created in the "colors" folder to link to your new skin files. View the xmp3mini support and options page for more details.

The Autostart option: | More Details
Any player you add can be set to either not start the song when your page loads or to autostart the mp3 file. You can edit any "player-?.js" to change this. Edit the "var autostart" to either a number "1" or a number "0". Using "1" will start the song when your page loads.

Player width:
You can make a small player that is 59 pixels wide. View the xmp3mini support and options page for more details.

Player border and border colors:
You can setup the color and width of a border around each player. To add a border edit the "player-?.js" files in the "xmp3Player-mini" folder. Edit the "BORDER COLOR" and the "BORDER WIDTH IN PIXELS" variables in the .js file.

The PSD files:
PSD files for the skin images can be found in the "extras" folder. PSD files are layered image files that are used when editing in Photoshop and some other graphics programs.

Mp3 File Length Limits:
There are no set limits on the length or file size for this application. You can use any .mp3 file for this player. It can be music or it can be a sound file.





Troubleshooting:


Sound not working:
For mp3 sound files not playing see the sound not working support page.


Wrong sound file playing:
  1. Did you edit the "player-1.js" file name to a new number in step #3 above when you added a second player to your HTML page or .js file? EXAMPLE: When you added the second player did you edit "player-1.js" to "player-2.js" when you did step #3?
  2. Did you edit the song name in the top of the "player-?.js" file?
  3. Did you replace the correct "song-?.mp3" file in the "xmp3Player-mini" folder?

Player not working:
If you do the steps above and the xmp3mini is not working:

  1. Be sure you have put the "xmp3Player-mini" folder and the 3 HTML files in this zip file in the same folder as the HTML page you are adding the player into.
  2. Try doing the above steps again from the start.
  3. Click here if this is not working when uploaded to your hosting area.

Skin images not working:
If the xmp3mini buttons and background are not showing up on the page here are some possible reasons.
  1. Did you spell the color correctly in the "player-?.js" file?
  2. Did you use capital letters for the color in the "player-?.js"? Use all capital letters for the colors.
  3. Did you edit the color in the "player-?.js" in 2 places?
  4. Are all folders and files uploaded to your hosting area?
  5. If you made new skins: Do not save these .jpg images as "progressive". Be sure to save them as "standard" .jpg images. Try re-saving these images using a "save as" and be sure to select "standard".
  6. If you made new skins: Have you placed your new skins in a new color folder in the "skins" folder? Did you create a new color .txt file in the "colors" folder?
  7. You have edited the wrong images or "player-?.js" file or the player files are not unzipped properly.











COPYRIGHT 2009 Allwebco Design Corporation
Unauthorized use or sale of this script, images or any files included in this download is strictly prohibited by law. By purchasing this script you are authorized to use this on a single Allwebco template, website or any template from another company. You are also authorized to modify all included files for this single site use.

Purchaser is authorized to use any and all mp3 sound files included in the download on a single website.