JS获取音频的总时长，解决Audio元素duration为NaN || Infinity 问题

当我们在加载一个线上mp3地址或者获取audio的duration的时候，会发现有拿到duration是Infinity的情况，这时如果我们动态的展示录音时间时候就会有问题。首先明确一下这是chrome浏览器自己的存在的一个bug，因为我们拿到的录音数据流没有定义长度，所以浏览器无法解析出当前音频的时长。

一、发现问题

使用浏览器内置播放器<audio>无法显示时长

Chrome && Edge： 播放到一定时间后才能移动进度条与显示时长

 

Firefox：直接可以看到进度条与时长 

 继续往下，解决Chrome中的问题

二、获取总时长为 NaN || Infinity

audio.ontimeupdate = () => {
	console.log(`currentTime: ${audio.currentTime} , duration: ${audio.duration}`)
}

根据输出结果发现，只有播放一段时间，或者开始播放的时候才会拿到总时长，但这并不是我们想要的。初始化的时候就想拿到总时长

三、解决方案

预加载！直接先播放一遍获取时长！

// node为audio标签的dom元素 
export const formatePlayerDuration = (node: any) => {
  node.onloadedmetadata = (e: any) => {
    const audio = e.target;
    const audioDuration = audio.duration;
    if (audioDuration === Infinity) {
      audio.currentTime = 1e101;
      audio.ontimeupdate = () => {
        audio.ontimeupdate = () => { return; };
        // 不重新设置currtTime,会直接触发audio的ended事件，因为之前将currentTime设置成了一个比音频时长还大的值。所以要将currentTime重置为初始状态。
        // 注: 这里有一个问题，直接设置为0 是不起作用的。需要重新设置一下audio.currentTime = 1e101;然后再设置为
        audio.currentTime = 1e101;
        audio.currentTime = 0;
      }
    }
  }
}

问题解决！！！！！！！

audio标签

<audio src='mp3地址' class="xxx" controls controlsList="nodownload noplaybackrate" preload="auto"></audio>

尝试了一种setTimeout的方法，也可以解决，但是页面时间部分会出现时间闪烁的情况，所以就不考虑了，代码贴出来

const audio = new Audio()
audio.src = 'https://www.xx.com/audio/xx.mp3'

const countAudioTime = async () => {
  while (isNaN(audio.duration) || audio.duration === Infinity) {
    await new Promise(resolve => setTimeout(resolve, 200));
    // 设置随机播放时间
    audio.currentTime = 10000000 * Math.random();
  }
  console.log('音频的总时长:',audio.duration)
}
countAudioTime()