Question

我发现了许多类似于我自己的问题，但其结果无效。

我试图将音频的当前时间显示为小时：分钟：秒（00:00:00），而不仅仅是在＆nbsp;秒钟内。或者＆＃39;分钟和秒钟＆＃39;目前的代码就是我的......

<audio id="audio" ontimeupdate="document.getElementById('tracktime').innerHTML = '0' + Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration); " src="music.mp3"></audio>

在以下内容中显示秒数为0/0

<span id="tracktime">0 / 0</span>

我已经搜索了几个小时，我找到的所有解决方案都无所事事。

我甚至找到了以下代码来提供帮助，但我不确定如何将其实施到＆＃39; ontimeupdate＆＃39;音频标签中的动作。

var minutes = '0' + Math.floor(currentTime / 60); var seconds = '0' + (currentTime - minutes * 60); var cur = minutes.substr(-2) + ':' + seconds.substr(-2);

如果可能，我希望它显示为两个单独的项目。像这样......

<div id="currentTime"></div>
<div id="duration"></div>

谢谢！

Answer 1

以下是您可以做的示例

＆＃13;

window.addEventListener('load', function() {
  var cur = document.querySelector('#cur'),
      dur = document.querySelector('#dur')
      vid = document.querySelector('#aud')
})
    
aud.addEventListener('timeupdate', function(e) {
  cur.textContent = "Current: " + sToTime(e.target.currentTime);
  dur.textContent = "Duration: " + sToTime(e.target.duration);
})

function sToTime(t) {
  return padZero(parseInt((t / (60 * 60)) % 24)) + ":" +
         padZero(parseInt((t / (60)) % 60)) + ":" + 
         padZero(parseInt((t) % 60));
}
function padZero(v) {
  return (v < 10) ? "0" + v : v;
}

＆＃13;

<audio id="aud" controls>
  <source src="http://techslides.com/demos/samples/sample.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<p id="cur"></p>
<p id="dur"></p>

＆＃13;

将<audio> currentTime转换为准确的时间显示

1 个答案: