HTML 5 Audio Player剩余时间显示延迟

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 eg '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>

Answer 2

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

1. 您具有padTime函数，因此请使用它（请参见第2点）！

    function padTime(t) { return t < 10 ? "0" + t : t; } 

2. 无需不必要或尽早转换为字符串：

    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); } 

3. 不要一遍又一遍地查询元素：

    if (player.readyState === 4) { jQuery(".end-time").html(totalLength); jQuery(".start-time").html(currentTime); } 

   在这里，不必每次在ontimeupdate回调中查询元素（ jQuery(".end-time") ）， ontimeupdate将引用保存在回调函数外部的变量中。

4. 限制颜色更新。

    setInterval(function() { SetSeekColor(); }, 34); 

   每毫秒更新一次颜色就太过分了。 34毫秒应等于30fps。

---

我注意到您已经计划在一页上包含多个播放器（ initPlayers(num) ）。 这里有几点想法：

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