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.
It is hard to really know where you are getting stuck. My guess is you are having problems getting the click to work and determining where to set the progress.
My solution is to have 2 elements, one wrapping the other. The outer element takes the click event and the size gets reflected by the inner element. You will have to do your own work integrating with the Ecoute player but I showed how to calculate the percentage.
var outside = document.getElementById('outside');
var inside = document.getElementById('inside');
outside.addEventListener('click', function(e) {
inside.style.width = e.offsetX + "px";
// calculate the %
var pct = Math.floor((e.offsetX / outside.offsetWidth) * 100);
inside.innerHTML = pct + " %";
}, false);
I didn't bother with any cross browser work since this is for a webkit based application.