javascript - 使用 javascript 解析并显示 HTML 音频当前时间

Question

我正在开发一个简单的 JavaScript + HTML 音频播放器，此时我想构建一个以“MM:SS”形式显示音频当前时间的界面。对于什么我可以搜索HTML Audio/Video DOM Reference只有一个 native 函数 - audio|video.currentTime - 返回当前音频时间(以秒为单位)，具有较大的小数精度。

为了做到这一点，我编写了代码:

HTML

<audio id='audio' src="http://www.stephaniequinn.com/Music/Canon.mp3" controls></audio>
<div id="timer">00:00</div>

JavaScript

var audio = document.getElementById('audio'),
      timer = document.getElementById('timer');

var update = setInterval(function() {

  timer.innerHTML = audio.currentTime;
}, 10);

我尝试了很多方法，但无法按照我想要的方式格式化输出。希望你们中的一些人能够对此有所了解。

Codepen sample

Answer 1

正在编辑CodePen

只需要一点数学知识! JS如下:

var update = setInterval(function() {
      var mins = Math.floor(audio.currentTime / 60);
      var secs = Math.floor(audio.currentTime % 60);
      if (secs < 10) {
        secs = '0' + String(secs);
      }
      timer.innerHTML = mins + ':' + secs;
    }, 10);