AJAX

Javascript MP3 Player

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2005

Posts: 1,403

Reputation: ShawnCplus is a glorious beacon of light

Solved Threads: 225

ShawnCplus ShawnCplus is offline

Offline

Code Monkey

Javascript MP3 Player

Jul 10th, 2007

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
Help with Code Tags

javascript Syntax (Toggle Plain Text)
```
var id2 = document.getElementById(typ);
```
var id2 = document.getElementById(typ);
Below else if(typ == "item") add the following
Help with Code Tags

javascript Syntax (Toggle Plain Text)
```
else if(typ == "load"){currentLoad = pr1;}
```
else if(typ == "load"){currentLoad = pr1;}
After that line go below the if(typ == "time") add this line
Help with Code Tags

javascript Syntax (Toggle Plain Text)
```
else if(typ == "load"){id2.style.width = (currentLoad-1)+"%" ;}
```
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

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
#prog-border {
  height: 13px;
  width: 205px;
  background: #e6d3a9;
  margin: 0;
}
#load {
  height: 10px;
  margin: 1px;
  padding-right: 1px;
  background: #006600;
  width: 0%;
}
#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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
 <div id="prog-border">
          <div id="load"></div>
 </div>
 <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

Last edited by ShawnCplus; Jul 10th, 2007 at 3:58 pm.

GCS d- s+ a-->? C++(++++) UL+++ P+>+++ L+++ E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r y+
PMs asking for help will not be answered, post on the forums. That's what they're there for.