CSS Player


If you're handy with CSS style sheets, you can design a player using standard CSS rather than relying on Skin Machine.

A CSS player can operate in conjunction with an existing wimpy player, or it can operate completely stand-alone.

For example, you can set up a normal Wimpy Player that doesn't include a visible playlist, then set up a CSS Player that you'll use as the playlist. Since the built-in playlist is limited design-wise, this scenario provides extra flexability for presentation.

Check out the examples in the main wimpy download ZIP package -- look in the "test" folder for the wimpyCssPlayer1.html and wimpyCssPlayer2.html files.

Setting up a CSS Player

1. To define a wimpy CSS player, use the "data-wimpyCssPlayer" attribute on a DIV tag:

<div data-wimpyCssPlayer></div>

You can place additional HTML within the wimpyCssPlayer DIV that is not related to wimpy. You have complete control over all the HTML and CSS styling.

2. You can use a wimpyCssPlayer in conjunction with normal wimpyPlayer, or as stand alone.

When using a CSS Player in conjunction with a standard wimpyPlayer, specify the ID for the wimpyPlayer in the data-forPlayer.

<!-- A normal wimpyPlayer -->
<div id="myPlayer" data-wimpyPlayer></div>
<!-- A CSS player that controls the normal player -->
<div data-wimpyCssPlayer data-forPlayer="MyPlayer"></div>

When using a stand-alone CSS player, set up player options, including the playlist, using the same "data-OPTION" that we use for a traditional wimpy player as attributes within the wimpyCssPlayer DIV.

<div data-wimpyCssPlayer data-media="track1.mp3"></div>

3. Within the wimpyCssPlayer DIV, define controls using the "data-" attribute.

<div data-wimpyCssPlayer>
<div data-play>Play</div>
<div data-pause>Pause</div> </div>

Wimpy automatically searches all the HTML code within the wimpyCssPlayer DIV looking for elements that have "data-CONTROL", where "CONTROL" is a key-word specific to a player control. A complete list of controls are listed below.

For each element that is assigned as a wimpy control, you're free to style these elements any way you want using CSS classes.

Wimpy automatically "wires" mouse/touch events to each control, so all you need to focus on is the CSS styling.

Available Controls

play Du Button
pause Du Button
stop Stops the player and resets the track. Button
next Goto next track Button
previous Goto previous track Button
coverart Displays image for current track/playlist Image Container.
artist Displays the current tracks into as defined in the playlist / track data set. Text
album Sames as above Text
title Sames as above Text
random Toggles random feature Button
loop Toggles loop feature Button
mute Toggles mute Button
thinker This element will rotate, so it should be a perfect square. Box/Text
current Displays track timing info Text
remaining Same as above Text
total Same as above Text
seek A timeline bar that user can click to "scrub" Box/Container
loading A bar indicating percentage loaded. Box
playlist A container for playlist items. Container
playlist-item A container for a single playlist item Container
item-image A box to display an associated track or playlist image within. This is dependant on the "image" field of the track data set defined in the playlist Box
item-title Displays the text info as defined in the associated track data set field. Text
item-artist Same as above Text
item-album Same as above Text