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

Question

我的音频播放器有问题，当用户按下播放按钮时，start-time 计时器会立即显示，但remaining-time 计时器会出现延迟。我对 JS 比较陌生，所以我无法自己识别问题。

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

CodePen

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 中的错误。在这段代码中，只需将类 rem-time 替换为 end-time。

<small style="float: right; position: relative; right: 21px;" class="end-time" onclick="showhideRemaining(this)"></small>