解决首次渲染时音频时长未定义引发的JavaScript Date API报错

当用<audio>元素流式播放archive.org上返回206 Partial Response的MP3文件时，会触发这个报错：

Uncaught RangeError: Invalid time value
    at Date.toISOString (<anonymous>)
    at setTimes (audio-player.min.js:92:8)

问题出在你格式化audioElement.duration的代码里——音频元数据还没加载完的时候，duration的值是NaN，直接拿它乘1000传给Date构造函数，会生成无效时间值，导致toISOString()抛错。你的原代码是这样的：

function setTimes() {
  playerCurrentTime.textContent = new Date(audioElement.currentTime * 1000)
    .toISOString()
    .substr(11, 8);
  playerDuration.textContent = new Date(audioElement.duration * 1000) // 报错位置
    .toISOString()
    .substr(11, 8);
}

修复方案 #

先判断时间值是否有效，无效的话显示占位符，等元数据加载完成后再更新正确时长。

第一步：封装格式化函数 #

把时间逻辑抽成单独函数，加入有效性校验：

function formatTime(seconds) {
  // 不是有效数字就返回占位符
  if (!isFinite(seconds)) {
    return '--:--:--';
  }
  return new Date(seconds * 1000)
    .toISOString()
    .substr(11, 8);
}

第二步：修改setTimes函数 #

调用封装好的格式化函数，替换原来的直接处理：

function setTimes() {
  playerCurrentTime.textContent = formatTime(audioElement.currentTime);
  playerDuration.textContent = formatTime(audioElement.duration);
}

第三步：优化事件监听（可选） #

加上loadedmetadata事件监听，确保元数据加载完成后再更新时长，减少无效调用：

// 初始化先调用一次
setTimes();

// 实时更新当前播放时间
audioElement.addEventListener('timeupdate', setTimes);

// 元数据加载完成后更新时长
audioElement.addEventListener('loadedmetadata', setTimes);

补充说明 #

archive.org的206部分响应不会一次性返回完整的MP3元数据，浏览器需要逐步加载才能拿到正确的duration值。在这之前，audioElement.duration是NaN，这是HTML5 Audio的标准行为，不是bug，只是需要你处理这个过渡状态。

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