JS累加章节audio duration得NaN，控制台访问正常如何解决

代码执行时机早于音频时长数据就绪的时间点。
音频的duration属性只有在对应元数据（含时长、采样率等基础信息）解析完成后才会返回有效数值，元数据未加载完成时取值为NaN；你在控制台手动查询时页面已经完成全部资源加载，所以能拿到有效值。
另外先排查一个低级问题：确认遍历的currentPart数组，和你控制台访问的chapters数组是同一数据源，避免遍历错对象。

根据你的时长数据来源选对应处理方式：

• 如果时长是从音频元素实时读取：不要在初始化阶段直接遍历累加，给每个音频绑定loadedmetadata事件，等元数据加载完成后再累计
• 如果时长是后端接口返回的字段：把累加逻辑放到接口请求完成、数据赋值到章节对象之后再执行

音频实时读取场景的参考实现：

let timelineLength = 0;
let loadedCount = 0;
const chapterTotal = currentPart.length;

currentPart.forEach(chapter => {
  chapter.audioElement.addEventListener('loadedmetadata', () => {
    timelineLength += chapter.audioElement.duration;
    loadedCount++;
    // 所有章节时长加载完成后再执行时间轴渲染
    if (loadedCount === chapterTotal) {
      initTimeline(timelineLength);
    }
  })
})

如果是接口返回时长的场景，只要把累加逻辑挪到接口响应的回调里就行，比如：

// 接口请求拿到章节数据后再计算
const res = await fetch('/api/get-chapters');
const currentPart = await res.json();
let timelineLength = 0;
currentPart.forEach(chapter => {
  timelineLength += chapter.duration;
})
initTimeline(timelineLength);

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