Question

我对音频播放器有问题，当用户按下播放键时，start-time计时器会立即显示，但是remaining-time计时器会延迟显示。我是JS的新手，所以我无法自行确定问题所在。

有人可以帮助我在播放事件中显示同步计时器（开始和剩余）吗？

var isSeeking = false;
var seek = document.getElementById("seekObj");
var player = document.getElementById("player");
SetSeekColor();
function calculateTotalValue(length) {
  var minutes = Math.floor(length / 60),
    seconds_int = length - minutes * 60,
    seconds_str = seconds_int.toString(),
    seconds = seconds_str.split(".")[0],
    temp_min = minutes.toString().length === 1 ? "0" + minutes : minutes,
    temp_sec = seconds.toString().length === 1 ? "0" + seconds : seconds;
  return temp_min + ":" + temp_sec;
}

function calculateCurrentValue(_seconds) {
  function padTime(t) {
    return t < 10 ? "0" + t : t;
  }

  if (typeof _seconds !== "number") return "";
  if (_seconds < 0) {
    _seconds = Math.abs(_seconds);
    //console.log(_seconds);
  }
  var hours = Math.floor(_seconds / 3600),
    minutes = Math.floor((_seconds % 3600) / 60),
    seconds = Math.floor(_seconds % 60);
  var hour = hours > 0 ? padTime(hours) + ":" : "";
  return hour + padTime(minutes) + ":" + padTime(seconds);
}
function setupSeek() {
  seek.max = player.duration;
}
function seekAudio() {
  isSeeking = true;
  player.currentTime = seek.value;
  isSeeking = false;
}
var prevcurrentime = 0;
function initProgressBar() {
  if (!isSeeking) {
    seek.value = player.currentTime;
  }
  var length = player.duration;
  var current_time = player.currentTime;

  // calculate total length of value
  var totalLength = calculateTotalValue(length);


  // calculate current value time
  var currentTime = calculateCurrentValue(current_time);
  if (player.readyState === 4) {
      jQuery(".end-time").html(totalLength);
    jQuery(".start-time").html(currentTime);
  }
  //checking if the current time is bigger than the previous or else there will be sync different between remaining and current
  if (currentTime > prevcurrentime) {
    //calculate the remaining time
    var rem_time = length - current_time;
    jQuery(".rem-time").html(calculateCurrentValue(rem_time));
  }
  //setting the previouscurrent time to this current time
  prevcurrentime = currentTime;

  if (player.currentTime == player.duration) {
    $("#play-btn").removeClass("pause");
  }
}

function initPlayers(num) {
  // pass num in if there are multiple audio players e.g 'player' + i

  for (var i = 0; i < num; i++) {
    (function() {
      // Variables
      // ----------------------------------------------------------
      // audio embed object
      var playerContainer = document.getElementById("player-container"),
        player = document.getElementById("player"),
        isPlaying = false,
        playBtn = document.getElementById("play-btn");

      // Controls Listeners
      // ----------------------------------------------------------
      if (playBtn != null) {
        playBtn.addEventListener("click", function() {
          togglePlay();
        });
      }

      // Controls & Sounds Methods
      // ----------------------------------------------------------
      function togglePlay() {
        if (player.paused === false) {
          player.pause();
          isPlaying = false;
          $("#play-btn").removeClass("pause");
        } else {
          $(".start-time").html("");
          player.play();
          $("#play-btn").addClass("pause");
          isPlaying = true;
        }
      }
    })();
  }
}

Answer 1

看起来不错，这是html中的错误。在这段代码中，只需将类allow(request_builder) .to receive(:config) .and_return(config)替换为rem-time。

end-time

Answer 2

我认为问题的根源在于代码的性能。我看不到两个计数器之间的时差很大，但是这里有一些建议的改进：

您具有padTime函数，请使用它（请参见第2点）！
```
function padTime(t) {
    return t < 10 ? "0" + t : t;
}
```

没有必要或尽早转换为字符串：

function calculateTotalValue(length) {
    var minutes = Math.floor(length / 60);
    var seconds = Math.floor(length - minutes * 60);

    // use the padTime function here with numbers
    return padTime(minutes) + ":" + padTime(seconds); 
}

不要一遍又一遍地查询元素：
```
if (player.readyState === 4) {
    jQuery(".end-time").html(totalLength);
    jQuery(".start-time").html(currentTime);
}
```
在这里，不必每次都在jQuery(".end-time")回调中查询元素（ontimeupdate），而是将引用保存在回调函数之外的变量中。
限制颜色更新。
```
setInterval(function() {
    SetSeekColor();
}, 34);
```
每毫秒更新一次颜色实在是太过分了。 34毫秒应该等于30fps。

我注意到您计划在一页（initPlayers(num)）上有多个玩家。这里有几点想法：

初始化播放器时，将每个播放器及其UI元素保存在对象中
initPlayers(jQuery("#player-container").length);：在整个HTML文档中，ID是（必须）唯一的。这将行不通，将其更改为类。

HTML 5音频播放器的剩余时间显示延迟

2 个答案: