Creating a clickable progress bar

Posted by Cory on Stack Overflow See other posts from Stack Overflow or by Cory
Published on 2010-12-31T17:02:35Z Indexed on 2010/12/31 18:54 UTC
Read the original article Hit count: 192

What I'm essentially building is a webkit based controller that communicates with a program called Ecoute.app.

The controller has a progressbar that indicates the progress made through the currently playing song, but I want to make this bar's position adjustable with a click.

function barClick() { 
    var progress = Ecoute.playerPosition(); 
    var width = 142.5;

    var percentElapsed = progress / length;
    var position = width * percentElapsed;

    Ecoute.setPlayerPosition(position);  
}

Is what I have, with Ecoute.playerPosition() returning the player's current position.

Width has previously been defined as a dynamic value at

 var width = 142.5 / length * progress + 1.63;

With length being the current track length and progress being the player's position. This has been able to dynamically stretch a progression overlay image to indicate the position of the track via the desktop controller.

However, the max width used in the second function does not appear to allow the first function to work properly.

Any help possibly determining the correct value or approach would be hugely appreciated.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about webkit