Web JukeBox Tips & Tricks


Ambassador
2,645 posts

Share your tricks or tips for WEB JUKEBOX with others!

This thread is for tricks and tips only - please no problem questions.

Have a problem or question then post in the
CoffeeCup Software Discussion thread, not here, so your question does not get overlooked.

Subscribe to this thread if you like to get emails on tips and Tricks people post


Senior Advisor
8,954 posts

Putting WebJukebox on MySpace - Success!

zlek wrote:
This is how i got it to work on myspace - http://www.myspace.com/loralee_

<embed allowScriptAccess="never" allowNetworking="internal" enableJavaScript="false" allowScriptAccess="never" allowNetworking="internal" src="http://your.webpage.com/player/mp3player_v1/mp3player.swf" menu="false" quality="high" width="220" height="320" name="index" allowScriptAccess="never" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="playList=http://your.webpage.com/player/mp3player_v1/mp3player.xml &ShowPlaylist=1&ShowEQ=1&firstTrack=1&initVol=50" wmode="transparent" border="0" /></embed>

hope this helps.


Registered User
4 posts

A workaround for the shuffle feature always playing the first song listed:

Here's away around it:

1) Create a 1 second long .mp3 file. Make sure it is inaudible.

2) Load it into Jukebox along with the other .mp3s you want.

3) Bring it up to first in the list

Away you go!

(E.g. : http://www.MyWoollyHat.com/)


Registered User
171 posts

I just want to mention how very easy it is to edit the skins for the web jukebox.

I just created this one for a client (a church site).
http://i50.photobucket.com/albums/f314/dp99/Untitled-2.jpg

I simply took the existing skin, and then used an image editing program to create the graphic I wanted. Then, I uploaded the files and used the FTP editor to change the XML file. I just took all of the buttons and shifted them down by the required number of pixels - took about 1.5 minutes of trial and error.

Voila! A totally unique look and a very impressed client. :)


Senior Advisor
8,954 posts

COFFEECUP XML DEMYSTIFIED!!!

Max wrote:
COFFEECUP XML DEMYSTIFIED!!!

The XML Source File Demystified.
I have been trying to decide how to present this over the past few days. I considered a full blown step-by-step skinning tutorial, but then decided that the average person who is considering skinning in the first place probably doesn't need the basics. So I decided to just present a crib-sheet on the XML contents. Hopefully that is enough to help someone.

Many of the attributes are shared, and have the same meaning regardless of which element contains them, so I only describe attributes once.

When you create a skin, imagine you are designing it on graph paper. Each square represents one pixel (a single point in an image).

X/Y/HEIGHT/WIDTH
The X axis represents the position when moving from left to right across the graph page.
The Y axis represents the position from top to bottom when moving down the graph page.

You will use these values in the body and the actions buttons, so let's mention them first

X from left to right - where does this image begin? 0 is top left
Y from top to bottom - where does this image begin? 0 is top left
W how wide is your image?
H how tall is your image?

Example:
so x=10, y=25, w=150, y = 15 would represent an image (perhaps a scrolling text label window)
that starts 10 pixels from the left (x) border, and 25 pixels down from the top (y) border.
Then it will be 150 pixels Wide by 15 pixels High.
NOTE: images are placed in position based on their TOP-LEFT coordinate.
The width goes out to the RIGHT from there, and the height goes DOWN from there.

QUESTION: How do I GET those X,Y coordinates anyway???
You could do trial and error if you had to. If you know your image is 100 pixels across and the previous button starts about 1/4th of the way across, try x=25. If the top-left corner of that button starts halfway down, and your body is 100 pixels high, try Y=50. It will only take you a few minutes per button using the trial and error method, so it's not that bad if it's all you've got.
GREAT - but how ELSE can I get the COORDINATES???
Most graphics programs have some feature that allows you to open the body image, put the mouse on a spot (say, the top left corner of the play button) and get the X,Y coordinates, to help you code it properly in your xml file. Despite having higher-end graphics programs like Photoshop, and medium-end programs like PhotoImpact, and others, I actually use the free graphics viewer IrfanView (www.irfanview.com) to get my coordinates, since it is small, fast, and easy to use. I open the body image. Click (and hold) on the top left corner of the button in question, and the titlebar in IRFANVIEW shows (X,Y: 19,71) (or whatever position I happen to be clicking on.) Very handy. very quick.

Back to the XML

visible
Do you want this item to be visible to the user? (true or false)

toggle
Certain buttons, such as loop and shuffle have Toggle States.
The button has an up image and a down image, one representing the "true" state (yes, shuffle),
and one representing the false state (no, don't shuffle)

playonstartup
Have jukebox start automatically upon page load? (t or f)

loop
Enable looping by default (a loop button doesn't have to be visible to be set to loop).. (To loop is to repeat a playlist over and over)

shuffle
Enable "Shuffling" by default (a shuffle button doesn't have to be visible to be set to shuffle). (shuffle means playing the playlist in completely random order.)

bkdobk="f"
Do you want to specify the background color when NOT using an image?
If set to true, specify the color in the parameter: bkfillclr="....."

NOTE: if ALL background related items are set to false (bkdobk, bkdogradient, bkdoimg),
then the background will be what is set on the HTML page in the object PARAMS.
i.e. <param name="bgcolor" value="#ffcc00" /> sets the background to a goldish color


if you do NOT use a JPG background image (in which case, set bkdoimg="f"), you can create a solid or gradient fill colored background for your jukebox.
bkdogradient="t"
Do you want to use a gradient fill (two-color blend)?

bkfillclr="0x00CC00" (green)
what color should the body of the jukebox be?
NOTE: Those are standard HEX color notations. If your graphics programs gives you colors like #C0C0C0, just dump the "#" and add "0x" to the beginning of the color code.

bkfillalpha="100"
(percent) how opaque is the background color gradient?
100% is completely solid.
0% is completely transparent (you won't see any of the gradient)

bkgradclr="0xCC3300" (red)
What is the color you want to use as a gradient blend with the background?

bkgradalpha="100"
How opaque do you want the gradient alpha blend to be?

bkgradangle="260"
What is the angle of the gradient?
You have from 1 tp 360, since we are dealing with a circular style gradient.
imagine you are rotating the two colors on a circular color-wheel (you are).
180 is straight from left to right. (green to red)
90 is straight top to bottom (red to green)
270 is straight top to bottom (green to red)
0 is straight left to right (red to green).
obviously (assuming you know a little geometry),
any non 90 degree angle is going to produce a
sloped effect to the color blend.
70 will seem to go from solid red
(top left corner, to solid green, bottom right corner),
and so forth.

Background image:
bkdoimg="t"
Do you want to use a background image for the background?

bkimg="myjukebox_files/body.jpg"
this is the path to the body image.
NOTE: if you have bkdoimg set to "f", no background will appear,
even if one is specified here.


bkdobdr="f"
Do you want a small line for a border around the jukebox?

bkbdrsolid="t"
(t) true. solid. a nice solid line.
(f) false. renders a dotted line.

bkbdrcolor="0x0033cc" (dark blue)
This is the color of the border

??? bkdomask="t"
Sorry no idea about this one. Have not yet been able to demystify it :-)


The Label and ScrollingLabel also allow you to set the font properties:

fntalpha="100"
How opaque do you want the font to be?

fntsize="10"
What point size do you want the font to be (bigger numbers, bigger font)

fntclr="0x000000"
What color should the font be?

fntbold="f"
Should it be bold?

fntitalic="f"
Should it be italic?

fnt="Arial"
What family should the font be?
i.e. Arial, Times, Helvetica, Serif
(I'm not really sure what the options are, but those four are probably standards)



ACTION
These are commands that are built into CoffeeCup to tell the program what to do when this image is clicked. Leave them at their defaults.


VOLUME is a built in flash object with a slider-line and a center rectangle to show where the current position is. You specify the x/y/height/width/and visibility of this object just like you would with the other images, though in this case, it is a builtin flash object.


PROGRESS is a built in flash object with a white to grey progressbar. You specify the x/y/height/width/and visibility of this object just like you would with the other images, though in this case, it is a builtin flash object.


TREE is the playlist parent container.
If you want the playlist in your jukebox, set visible to true. Position it using the familiar x/y/w/h settings
NOTE: despite what a coffeecup support person told me, I don't see any way to make it appear as anything other than the default white solid background with black text. I'd love to be able to customize this to better suit skins, but ... well, maybe you can teach ME how to do this if it's possible :-)


NODE LABEL as first NODE: This is text that appears in the first row of the playlist. Chances are you want it to represent the playlist. Obviously, this is just another song node, but with the name and file parameters removed.
It is optional. You can yank it if you don't want it.

<node label="A STATIC TEXT TITLE for the playlist">
</node>

When you create your skin do not include anything inside the default node. When the user adds files, CoffeeCup will fill that in.


ADVANCED: ANIMATED SKINS
If you design your skin with JPG images, but also make corresponding animated flash images (swf files), after you have generated the code using CoffeeCup for your jukebox, go back into the xml file and replace any static jpg images with the corresponding swf file. Then be sure to upload those auxilliary files as well.


Registered User
34 posts

php solution for single directory

I saw on the internet a company that gives a special service, Listen to the page you are browsing! they charge $27 per month. SO, I purchased Web juke box for only 23$ for life...(Ambasador discount), created a single button player, embeded it into my page and here we go!

I also found a PHP solution for a single directory for ALL juke box players.
the html link calles the html page created by the program. I changed it to PHP reading the "GET" page name parameter, echoing it in the filename parameter.
All I have to do is create a new XML file for each MP3 by copying the exist one and changing the file name parameter and renaming it acordingly!
This way, I am using a single play and stop buttons while keeping ALL files in one directory.
you can see the page working on:
http://www.elc-music.com/code/presentation.html

Lazer Cohen
PIE Multimedia
www.pie-multimedia.com


Registered User
388 posts

Saving Space on Talking files

If you have only talking type files on your jukebox you can set them very low in bitrate and they still sound fine and use up alot less space.


Registered User
1 post

Image editing for the appearance of the juke box

I'm going to give the xml editing a try. I used image editing programs to alter the appearance of the jukebox, but wasn't satisfied, so I decided to build my jukebox around the jukebox. I would like to be able to show the songs in the player instead of just the buttons. That will be my next task.

This is what I have now: http://www.lindasmemorylane.com/jukebox/jukebox5.html

I created the image and placed it as a table background and modified the cells for placement of the play controls.


Registered User
34 posts

I would be VERY happy if for a SINGLE file the player can be called WITHOUT a need for the XML - file node.

If the player finds a falsh param say: name=file conntent=xxx.mp3
it will NOT look in the XML for the file node.
if the param does not exist, it will read this node from the XML.

Eli.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.