我实质上要构建的是基于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个元素,一个包含另一个元素。外部元素接受click事件,大小由内部元素反映。您将需要与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

07-24 09:47
查看更多