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
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"){ = (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>

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

iamthwee commented: nice +12

Recommended Answers

All 2 Replies

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

...which would work only for Windows.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.