Uniapp使用InnerAudioContext返回内部 audio 上下文 ,获取不到duration当前音频的长度,如何解决?

原因:其实是wx的bug,这个问题在开发环境中,并不会遇到。而是真机测试或发版后,就获取不到duration。

解决:我们只要去手动播放音频后,就会抓取到duration。

代码示例

关键代码

this.audioContext.play(); //手动播放音频

完整代码

javascript 复制代码
AudioPlay(file) {
				this.audioContext = uni.createInnerAudioContext({
					useWebAudioImplement: true
				});
				this.audioContext.src = file.path;
				this.audioContext.startTime = 0;
				this.audioContext.play(); //手动播放音频
				this.audioContext.stop(); //手动停止播放音频
				this.audioContext.onPlay(() => {
					console.log('开始播放');
				})
                 //调用onCanplay使音频进入可以播放状态
				this.audioContext.onCanplay(() => {
					console.log(_this?.audioContext?.duration, "duration");
					let intervalID = setInterval(() => {
						if (this?.audioContext?.duration !== 0) {
							const time = Math.floor(this.audioContext.duration);
							clearInterval(intervalID); // 清除定时器
                            console.log("当前音频长度",this?.audioContext?.duration, "duration");
							//这里可以做音频的限制
							if ( time > 60) {
								this.audioContext = null;
								uni.showToast({
									icon: "none",
									title: "音频不能超过1分钟",
								});
							} 
						}
					}, 500);
					
				});
			},
相关推荐
飞猿_SIR2 小时前
Android双屏异显副屏实现PIP效果小窗口同步显示主屏播放画面
android·音视频·pip
狼性书生2 小时前
uniapp vue3实现的一款数字动画调节器件,支持长按、单点操作,提供丝滑的增减动画效果
前端·vue.js·微信小程序·小程序·uni-app
小和尚敲代码2 小时前
推荐一款uniapp的日历插件魔改版可显示阳历阴历农历公历
uni-app·日历·uni-calendar
礼貌而已2 小时前
vue3+ts+uniapp+unibest 微信小程序(第二篇)—— 图文详解自定义背景图页面布局、普通页面布局、分页表单页面布局
微信小程序·uni-app·notepad++
qq_12498707532 小时前
Java+Vue+uniapp微信小程序校园自助打印系统(程序+论文+讲解+安装+调试+售后)
vue.js·微信小程序·uni-app·毕业设计
林涧泣2 小时前
【Uniapp-Vue3】使用uniCloud.uploadFile上传图片到云存储
uni-app
余~~185381628006 小时前
矩阵碰一碰发视频源码搭建之,支持OEM
线性代数·矩阵·音视频
lifire_H14 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
林涧泣14 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
LittleNyima14 小时前
【代码解读】阿里最新开源视频生成模型 Wan 2.1 实现解析
人工智能·stable diffusion·aigc·音视频