uniapp获取音频时间Infinity

文章讲述了在使用uniapp的innerAudioContext获取上传音频文件时遇到时长为Infinity的问题,解决方案包括设置定时器检测、先重置进度再获取时长,以及发现直接seek(0)即可解决问题。

问题描述

最近使用uniapp的innerAudioContext获取上传的音频文件的时长时,发现获取时间是Infinity
infinity
但是直接打开地址又是能播放
audio

解决方法

const _this = this
this.innerAudioContext.onCanplay(res=>{
	// 设置定时器获取音频时间(避免获取到NaN)
	let intervalID = setInterval(() => {
		let time = Math.floor(_this.innerAudioContext.duration)
		if(!Number.isFinite(time)){ // 如果时间是Infinity
			// 先设置时间为无限大,然后再重新设置为0
			// _this.innerAudioContext.seek(Number.MAX_SAFE_INTEGER)
			_this.innerAudioContext.seek(0)
		}
		if (time !== 0 && time !== Infinity) {
			clearInterval(intervalID); // 清除定时器
			// TODO
			// ****
		}
	}, 100);
})

先将语音进度设置一个值再设置回0

后来发现只用设置this.innerAudioContext.seek(0)也可以获取到时间

<think>好的,我现在需要解决用户提出的音频长度显示为Infinity的问题。首先,我得弄清楚这个问题的常见原因。根据以往的经验,音频元数据未正确加载可能导致duration属性无法获取,从而返回Infinity。不过我得验证一下这个可能性。 用户提到参考的引用内容是关于回调函数的作用域,特别是onStart回调。这可能与音频加载的异步过程有关。如果音频文件没有完全加载,或者在加载完成前就尝试读取duration,可能会得到不正确的值。这时候需要确保在音频元数据加载完成后再获取duration。 接下来,我应该考虑解决方案的步骤。首先,检查是否在音频元素加载完成前访问了duration。通常,需要在canplaythrough或loadedmetadata事件触发后再读取。比如,在JavaScript中,可以给audio元素添加事件监听器,确保在元数据加载完成后获取duration。 另外,可能的问题源包括跨域资源的问题,如果音频文件来自不同源且服务器未正确设置CORS头,可能会导致元数据无法读取。这时候需要检查网络请求,确认是否有CORS错误,并确保服务器配置正确。 代码示例方面,可以提供一个简单的例子,展示如何正确使用事件监听来获取duration。同时,也要提醒用户检查音频文件的URL是否正确,文件是否存在,以及格式是否被浏览器支持。 最后,总结可能的原因和对应的解决方案,帮助用户系统地排查问题。比如分步骤检查事件监听、CORS配置、文件有效性等。</think>要解决音频时长显示为`Infinity`的问题,需分步骤排查以下原因: --- ### 1. 元数据未加载时访问属性 音频的`duration`属性在元数据加载完成后才能正确获取。**若在文件未加载完成时读取,会返回`Infinity`**。 **解决方案**:使用`loadedmetadata`事件监听确保元数据就绪: ```javascript const audio = new Audio('audio.mp3'); audio.addEventListener('loadedmetadata', () => { console.log(audio.duration); // 此时能正确显示时长 }); audio.preload = 'metadata'; // 强制预加载元数据 ``` --- ### 2. 跨域资源限制(CORS) 若音频文件来自不同域且未配置CORS,浏览器会阻止读取元数据[^1]。 **解决方案**: - 服务器端设置响应头:`Access-Control-Allow-Origin: *` - 客户端设置`crossOrigin`属性: ```javascript audio.crossOrigin = 'anonymous'; ``` --- ### 3. 文件路径错误或格式不支持 **无效的文件路径**或**浏览器不支持的音频格式**(如AAC文件在部分浏览器需特定配置)会导致元数据解析失败。 **排查方法**: - 检查浏览器开发者工具的`Network`面板,确认音频文件返回200状态码 - 使用`<audio>`标签直接测试文件可播放性 --- ### 4. 流媒体或实时音频 直播流等**没有固定时长音频源**会始终返回`Infinity`,这是正常现象。 --- ### 完整示例代码 ```javascript const audio = document.createElement('audio'); audio.crossOrigin = 'anonymous'; // 处理跨域 audio.preload = 'metadata'; audio.addEventListener('error', () => { console.error('文件加载失败:', audio.error); }); audio.addEventListener('loadedmetadata', () => { if (!isFinite(audio.duration)) { console.log('时长获取异常:检查文件格式或CORS配置'); } else { console.log('正常时长:', audio.duration); } }); audio.src = 'https://example.com/audio.mp3'; ``` ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值