1

私が基本的に構築しているのは、Ecoute.appと呼ばれるプログラムと通信するWebkitベースのコントローラーです。

コントローラーには、現在再生中の曲の進行状況を示すプログレスバーがありますが、このバーの位置をクリックで調整できるようにしたいと思います。

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番目の関数で使用されている最大幅は、最初の関数が正しく機能するようには見えません。

正しい値またはアプローチを決定するための助けをいただければ幸いです。

4

2 に答える 2

2

どこで行き詰まっているのかを本当に知るのは難しいです。私の推測では、クリックを機能させ、進行状況を設定する場所を決定するのに問題があります。

私の解決策は、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

于 2010-12-31T20:47:30.887 に答える
0

HTMLで、

0％再生済み</ progress>

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';          
});
于 2015-05-14T06:46:42.267 に答える