Создание интерактивного индикатора выполнения

Question

По сути, я создаю контроллер на основе webkit, который взаимодействует с программой Ecoute.app.

Контроллер имеет индикатор выполнения, который показывает прогресс, достигнутый в текущей воспроизводимой песне, но я хочу, чтобы положение этой панели регулировалось одним щелчком мыши.

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

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

    Ecoute.setPlayerPosition(position);  
}

Это то, что у меня есть, с Ecoute.playerPosition() возврат текущей позиции игрока.

Ширина ранее была определена как динамическое значение при

 var width = 142.5 / length * progress + 1.63;

Длина - текущая длина трека, а прогресс - позиция игрока. Это позволило динамически растягивать изображение наложения прогрессии, чтобы указать положение дорожки через контроллер рабочего стола.

Однако максимальная ширина, используемая во второй функции, по-видимому, не позволяет первой функции работать должным образом.

Любая помощь, возможно определяющая правильное значение или подход, будет чрезвычайно цениться.

Answer 1

Трудно действительно понять, где вы застряли. Я предполагаю, что у вас есть проблемы с получением щелчка для работы и определения, где установить прогресс.

Мое решение состоит в том, чтобы иметь 2 элемента, один оборачивая другой. Внешний элемент принимает событие щелчка, и размер отражается внутренним элементом. Вам придется выполнить свою собственную работу по интеграции с плеером Ecoute, но я показал, как рассчитать процент.

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);

Я не беспокоился о кросс-браузерной работе, так как это для приложения на основе webkit.

Демо: http://jsbin.com/ubana3/5

Answer 2

В вашем HTML,

0% сыграно

В JQuery,

mediaPlayer = document.getElementById(playerId);
progressBar = document.getElementById('progress-bar');

progressBar.addEventListener('click', function(e) {
     var percentage = Math.floor((e.offsetX / this.offsetWidth) * 100);
     mediaPlayer.currentTime  = mediaPlayer.duration*(percentage/100);
     progressBar.value        = percentage;
     progressBar.innerHTML    = percentage + '% played';          
});