使用javascript解析並顯示HTML音頻當前時間

Question

我正在使用普通的JavaScript + HTML音頻播放器，目前我想構建一個界面，以“ MM：SS”的形式顯示音頻的當前時間。 對於我可以搜索的內容，“ HTML音頻/視頻DOM參考”只有一個本機函數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樣本

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

Answer 2

我認為這是最優雅的方式：

var seconds = audio.currentTime % 60;
var minutes = Math.floor(audio.currentTime / 60);

timer.innerHTML = ('0' + minutes).substr(-2) + ':' + ('0' + seconds).substr(-2);