音频持续时间返回NaN需要一些修改来运行播放器

Audio duration returns NaN need some modification to run the player

本文关键字：修改 运行 播放器 持续时间 返回 NaN 音频      更新时间：2023-09-26

每当我运行脚本时，它都会返回音频持续时间的NaN。

脚本

var mytrack = document.getElementById('mytrack'); 
var duration1 = document.getElementById('fullDuration');
duration1.innerHTML = parseInt(mytrack.duration);
HTML 

<audio id="mytrack" controls autoplay>
  <source src="kalimba.mp3" type="audio/mp3" />
</audio>
<span id="fullDuration">0:00</span>

始终建议使用loadedmetadata的事件，然后调用它们将始终有效。在这种情况下，使用事件侦听器是最好的。

var a = document.getElementById('mytrack');
a.addEventListener("loadedmetadata", function() {
  var duration1 = document.getElementById('fullDuration');
  duration1.innerHTML = parseInt(a.duration);
}, true);

等待媒体加载，然后设置<span>标记的内容。为了获得最佳效果，请将此代码放在文档的末尾，</body>标记之前或使用窗口的加载事件:

document.addEventListener('DOMContentLoaded', function () {
  var a = document.getElementById('mytrack');
  a.addEventListener("loadedmetadata", function() {
    var duration1 = document.getElementById('fullDuration');
    duration1.innerHTML = a.duration;
  }, true);
}, false);

正如评论中所说，还有另一种方法可以使用preload attribute:

这个枚举属性旨在向浏览器提供一个提示，提示作者认为什么会导致最佳的用户体验。

但是既然你已经有了autoplay属性，我想preload就不需要了。

autoplay属性优先于preload。如果指定了autoplay，浏览器显然需要开始下载音频以便播放。

您可以使用oncanplaythrough事件。parseInt()不是必需的。

var mytrack = document.getElementById("mytrack");
var duration1 = document.getElementById("fullDuration");
mytrack.oncanplaythrough = function() {
  duration1.innerHTML = this.duration
}
<audio id="mytrack" controls autoplay>
  <source src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Micronesia_National_Anthem.ogg" type="audio/ogg">
</audio>
<span id="fullDuration">0:00</span>

相关文章：