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

一、发现问题

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

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标签

尝试了一种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()