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()

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

Android 如何获取视频的总时长
在做视频的时候,往往需要获取视频的总时长,比较常用的就是用getDuration()方法获取,但是在获取的时候总是显示获取到的值为-1,在网上找答案的时候,大多解决方案写的都比较简略,对于我这样入门没 ...
iframe标签解析腾讯视频链接的获取不到总时长的解决方案(Txp.play.js)
记一次项目总结: 腾讯视频(Txp.play.js) <iframe> API 的使用由于视频URL是来自腾讯视频,所以会出现一个这样的情况:无法获取到用户所看的该视频的总时长,那麽就得 ...
java获取音频_java获取音频文件播放时长
方法一: 在项目开发过程中,需要获取音视频文件时长.查询资料后发现 JAVE能够完美得到想要的结果,JAVE项目简介如下: The JAVE (Java Audio Video Encoder) li ...
php查看音频属性,PHP获取音频mp3文件时长或音频文件其它参数属性
标签: 今天在开发项目中遇到一个问题,要获取到上传音频的时长,从而展示在前端页面最后找到解决方案: 1.首先,我们需要先下载一份PHP类-getid3 https://codeload.githu ...
js 获取上传视频时长
有时候我们在上传视频时,可能需要获取视频时长,可以有两种方法 1.创建video标签,赋值src,然后播放获取时长(可将标签隐藏) 2.通过 Audio 对象将视频文件对象传入,获取时长,代码如下 ...
tp5引入第三方类实现获取音频(.mp3)文件时长。
一.你需要在核心之外扩展和使用第三方类库,并且该类库不是通过Composer安装使用,那么可以直接放入应用根目录下面的extend目录下面,该目录是官方建议的第三方扩展类库目录. 二.类的命名规范遵循 ...
Android获取mp3音频文件播放总时长
Android获取mp3音频文件播放总时长一般是需要文件的绝对路径,需要读取文件,转成媒体类解析,最好获取播放时长,然后关闭资源. /** * 获取音频文件的总时长大小 * * @param fil ...
原生js video获取当前视频时间进度和视频总时长
<div id="toolist"><video src="./resource/VID_0005.3gp& ...
Praat脚本-007 | 计算目录里音频或者TextGrid总时长
目录引出简便操作脚本脚本说明运行脚本如何获取脚本关注版权说明引出统计录音时长,是大家经常用到的一个功能,统计的方法有很多,这里小编只介绍两种,一种是在win10系统中的资源管理器中 ...

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

一、发现问题

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

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

三、解决方案

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

最新文章

热门文章

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

一、发现问题

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

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

三、解决方案

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

最新文章

热门文章

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