JavaScript中Audio对象获取duration返回NaN，timeStamp显示异常求助

尝试修改class为timeStamp的元素innerText时，console.log(audio.duration)输出NaN，导致元素显示NaN，已确认音频文件及路径无误，需要正确显示音频时长。

相关代码 #

HTML代码 #

<div class="songItem">
    <img src="covers/1.jpg" alt="1">
    <span class="songName">Legion</span>
    <span class="songListPlay"><span class="timeStamp">05:34</span><i id="1" class="fa-sharp songItemPlay fa-regular fa-circle-play"></i></span>
</div>
<div class="songItem">
    <img src="covers/2.jpg" alt="2">
    <span class="songName">Legion</span>
    <span class="songListPlay"><span class="timeStamp">05:34</span><i id="2" class="fa-sharp songItemPlay fa-regular fa-circle-play"></i></span>
</div>
<div class="songItem">
    <img src="covers/3.jpg" alt="3">
    <span class="songName">Legion</span>
    <span class="songListPlay"><span class="timeStamp">05:34</span><i id="3" class="fa-sharp songItemPlay fa-regular fa-circle-play"></i></span>
</div>

原JavaScript代码 #

let songItems = Array.from(document.getElementsByClassName('songItem');
let songs = [ {songName: "A", filePath: "songs/1.mp3", coverPath: "covers/1.jpg"},
              {songName: "B", filePath: "songs/2.mp3", coverPath: "covers/2.jpg"},
              {songName: "C", filePath: "songs/3.mp3", coverPath: "covers/3.jpg"}];
songItems.forEach((element, i)=>{
    var audio = new Audio(songs[i].filePath);
    console.log(audio.duration) // displays NaN
    element.getElementsByClassName('timeStamp')[0].innerText = audio.duration;
});

问题原因及解决办法 #

原因 #

创建Audio对象后立即获取duration时，音频的元数据（包括时长）还未加载完成，因此返回NaN。另外原代码存在语法错误：Array.from(document.getElementsByClassName('songItem'))缺少闭合括号。

修改后的代码 #

let songItems = Array.from(document.getElementsByClassName('songItem'));
let songs = [ 
  {songName: "A", filePath: "songs/1.mp3", coverPath: "covers/1.jpg"},
  {songName: "B", filePath: "songs/2.mp3", coverPath: "covers/2.jpg"},
  {songName: "C", filePath: "songs/3.mp3", coverPath: "covers/3.jpg"}
];

// 把秒数格式化为 mm:ss 格式
function formatDuration(seconds) {
  if (isNaN(seconds)) return "00:00";
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

songItems.forEach((element, i) => {
  const audio = new Audio(songs[i].filePath);
  
  // 监听元数据加载完成事件
  audio.addEventListener('loadedmetadata', () => {
    const durationText = formatDuration(audio.duration);
    element.querySelector('.timeStamp').innerText = durationText;
  });

  // 处理音频加载失败的情况
  audio.addEventListener('error', () => {
    element.querySelector('.timeStamp').innerText = "加载失败";
  });

  // 主动触发加载操作
  audio.load();
});

关键说明 #

1. 修复了原代码的语法错误，补全了Array.from的闭合括号
2. 使用loadedmetadata事件监听元数据加载完成，此时获取audio.duration才会得到正确值
3. 新增formatDuration函数，将秒数转换为用户需求的mm:ss格式，替代原始的纯数字时长
4. 添加error事件监听，处理音频加载失败的异常情况，避免显示错误内容

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