HTML and CSS Reference

In-Depth Information

app.playButton = function(id, track){

...

this.draw = function(){

var percentage = 100 - ((track.getCurrentTime() / track.getLength())

* 100);

};

}

This is simply calculated as (current time / length) * 100. This will give you a

predictable number between 1 and 100. You will need to return a percentage,

where 100% is when the track is at the beginning, and 0% is when the track is

at the end. To do this, you simply subtract the percent played from 100 to give

you the percent of the track that is remaining.

The next step is to calculate the angle of the playback head based on the

percentage of track remaining. You know that the result of 2 *
π
(PI) will equal

the angle of a full circle in radians. 0 *
π
(PI) will result in 0, which will result in an

empty circle.

app.playButton = function(id, track){

...

this.draw = function(){

var percentage = 100 - ((track.getCurrentTime() / track.getLength()) *

100);

var endradians = (percentage * (2 / 100)) * Math.PI;

};

}

Figure 7-10 shows the significant positions of the PI calculations.