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).
- Add a currentLoad variable to the script.
- Inside of the getUpdate function add
var id2 = document.getElementById(typ);
- Below else if(typ == "item") add the following
else if(typ == "load"){currentLoad = pr1;}
- 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 
Unsolved 
