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

Parsing and showing HTML audio current time with javascript

本文关键字：音频 时间 HTML 显示 javascript 使用      更新时间：2023-09-26

我正在开发一个普通的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);
我

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

代码笔示例

工作编辑的代码笔

只需要一点数学！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);

我认为这是最优雅的方式：

var seconds = audio.currentTime % 60;
var minutes = Math.floor(audio.currentTime / 60);
timer.innerHTML = ('0' + minutes).substr(-2) + ':' + ('0' + seconds).substr(-2);
相关文章：