Audio duration返回NaN求助：音频元素duration获取失败但currentTime正常

你遇到的问题核心是音频的元数据（包含时长信息）还未加载完成就去读取duration属性，而currentTime能正常返回，要么是你之前手动设置过该值，要么浏览器已能读取到当前播放位置，但时长必须等音频文件的元数据解析完毕后才能获取。

之前video能正常工作，大概率是因为video资源的元数据加载速度更快，或是已被浏览器缓存，所以你读取时已经就绪。

下面是两种可行的解决方法：

方法一：监听loadedmetadata事件 #

这是最可靠的方式，等浏览器加载完音频元数据后再获取时长：

let quran = document.querySelectorAll(".question-one audio");
const targetAudio = quran[0];

// 监听元数据加载完成事件
targetAudio.addEventListener('loadedmetadata', () => {
  console.log(targetAudio.duration); // 此时能拿到正确的时长数值
  console.log(targetAudio.currentTime); // 52
});

方法二：检查readyState状态 #

通过readyState属性判断音频是否已加载元数据，当readyState >= 1（对应HAVE_METADATA状态）时，就能正常获取时长：

let quran = document.querySelectorAll(".question-one audio");
const targetAudio = quran[0];

if (targetAudio.readyState >= 1) {
  console.log(targetAudio.duration);
} else {
  targetAudio.addEventListener('loadedmetadata', () => {
    console.log(targetAudio.duration);
  });
}

如果音频还未开始加载，也可以先调用load()方法强制触发资源加载：

targetAudio.load();

内容的提问来源于stack exchange，提问作者Moatasim Ashraf