Javascript MP3 Player

[ShawnCplus]

Most likely you've seen a flash MP3 player or two while searching the web but I have a favorite. This is the JW MP3 Player, mainly because it has external JavaScript functions that can be used to access data about the player dynamically. I've written a few things for it that don't come "standard." While searching around I found a CSS progress bar and found it pretty pointless since it's static, then I put 2 and 2 together. This is a little script that can be used with the external functions of the MP3 player to show the loading buffer.

The JavaScript for the external functions are found at http://www.jeroenwijering.com/extras/javascript.html
After adding the the variables to allow external javascript functions in the player (explained in the readme).

1. Add a currentLoad variable to the script.
2. Inside of the getUpdate function add

   var id2 = document.getElementById(typ);

3. Below else if(typ == "item") add the following

   else if(typ == "load"){currentLoad = pr1;}

4. After that line go below the if(typ == "time") add this line

   else if(typ == "load"){id2.style.width = (currentLoad-1)+"%" ;}

Done with the JavaScript, now onto the CSS for the image-less progress bar.
In your stylesheet add the following

#prog-border {
  height: 13px;
  width: 205px;
  background: #e6d3a9;
  margin: 0;
}
#load {
  height: 10px;
  margin: 1px;
  padding-right: 1px;
  background: #006600;
  width: 0%;
}

The colors can be changed any way you like which is the reason why I chose to go with the JavaScript external functions rather than the flash player.

Wherever you want your progress bar to display put

<div id="prog-border">
          <div id="load"></div>
 </div>

Note: The script could be easily modified to allow the progress bar to be the play time though it would require some extra math to change the seconds to a % of the running time.

Here it is in action at the bottom of the page. The entire player is using the JavaScript functions, a table, some css and the silk iconset

[Voynex]

it is possible to do almost the same things using embedded windows media player 9 and above

[~s.o.s~]

...which would work only for Windows.