HTML5:如何获取音频标签的currentTime和持续时间(以毫秒为单位）

HTML5: How to get currentTime and duration of Audio Tag in milliseconds

本文关键字：为单位 currentTime 持续时间 音频 何获取 HTML5 获取 标签      更新时间：2023-09-26

我正在使用HTML5音频标记来播放模板中的声音文件。出于某种目的，我需要跟踪显示为毫秒的currentTime和持续时间。现在我只能在几秒钟内得到这些值。有什么可能的方法吗？以下是我的代码：

HTML
<audio controls id="track" src="<path-to-soundtrack>"
   ontimeupdate="TrackAudio(this)">
<p>Your browser does not support the audio element</p>
</audio>

JAVASCRIPT
function TrackAudio(element){
var curTime = Math.floor(element.currentTime);
console.log(curTime)   //Value in seconds.
}

您可以使用：

<audio id="track" controls>
  <source src="your.mp3" type="audio/mpeg">
  <source src="your.ogg" type="audio/ogg">
</audio> 
<script type="text/javascript">
var audio = document.getElementById('track');
audio.addEventListener('timeupdate',function(){
    var currentTimeMs = audio.currentTime*1000;
    console.log(currentTimeMs);
},false);
</script>

有关时间更新事件精度的更多信息，请阅读此处。它取决于浏览器的实现，所以请记住，不同的浏览器/设备会得到不同的结果。

您应该使用addEventListener方法，而不是ontimeupdate属性——它更易于维护。

此外，如果你需要浏览器覆盖范围，最好同时使用ogg和mp3音频文件作为源。

相关文章：