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

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

1 голос
/ 31 декабря 2010

По сути, я создаю контроллер на основе 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;

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

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

Буду очень признательна за любую помощь, которая может определить правильное значение или подход.

Ответы [ 2 ]

1 голос
/ 31 декабря 2010

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

Мое решение состоит в том, чтобы иметь 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

0 голосов
/ 14 мая 2015

В вашем 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';          
});
...