折磨我致死的uni.createInnerAudioContext()

uni.createInnerAudioContext实战踩坑记录
在前端项目中使用uni的音频播放功能时,遇到uni.createInnerAudioContext实现列表播放的问题。按照官方文档创建实例并设置url后,虽然能播放,但在列表播放时出现了意想不到的坑。经过一番研究,最终解决了问题。代码示例和解决过程在文中详细描述。
部署运行你感兴趣的模型镜像

今天项目用到uni的音频播放功能 我脑海里第一印象就是audio 标签 有标签啊 然后我就看到了这样的一段话,
在这里插入图片描述
抱着学习的态度 我开始了万恶的旅程
需要的样式是这样的
在这里插入图片描述
给我的数据是这样的在这里插入图片描述
一看就是v-for来进行展示的让我们看下官方文档 看一眼示例看一眼说明在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
ps:没有截全,建议官方文档仔细的看

创建实例设置url就可以播放了通过play方法开始使用了

但是想象和现实十分的不同 列表确实是被生成了 开始出现坑

我一开始写出来代码是这样的

audio(e){ //e为传入音频src
		const innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.src = e;
		innerAudioContext.play();
		}
		此时出现的问题
		一、没有暂停
		二、当点击多条时会有多条音频同时播放


开始解决问题
首先多条音频开始解决

多条音频同时播放是因为每次点击的时候都会去创建一次示例
所以我们只需要把这段代码放在 onload 中或者 放在   export default 上面就可以了 
const innerAudioContext = uni.createInnerAudioContext();

再解决暂停问题当时我的代码是这样的
audio(e){
innerAudioContext.src = e;
if(innerAudioContext.paused){ 
/*paused 判断音频当前的播放状态 true 表示暂停或停止,
 *false 表示正在播放
 */
	innerAudioContext.play()
	}else{
	innerAudioContext.pause() //暂停
	innerAudioContext.onPause(()=>{//暂停时调用的方法  
	innerAudioContext.startTime = innerAudioContext.currentTime
	//startTime  设置开始时间  currentTime 暂停时的秒数   官方文档都有写
	})
	}
}
暂停实现了 但时每次继续播放都是从头开始播放
原因就出在了innerAudioContext.src = e;原因好像时因为每次都会加载一次src 所以才会这样


最后代码


	audio(e){
				let _this = this
				if(_this.music == e){
					if(innerAudioContext.paused){
						innerAudioContext.play()
					}else{
						innerAudioContext.pause()
						innerAudioContext.onPause(()=>{
							innerAudioContext.startTime = innerAudioContext.currentTime
						})
				}

				}else{
					innerAudioContext.src = e
					if(innerAudioContext.paused){
							innerAudioContext.play()
						}else{
							innerAudioContext.pause()
							innerAudioContext.onPause(()=>{
								innerAudioContext.startTime = innerAudioContext.currentTime
							})
					}
						
				}
				_this.music =e 
			},

我也百度了近一上午实在时网上案例太少,冥思苦想大半天终于悟出来了 如果有不对之处请指正,希望可以帮到你

您可能感兴趣的与本文相关的镜像

TensorFlow-v2.9

TensorFlow-v2.9

TensorFlow

TensorFlow 是由Google Brain 团队开发的开源机器学习框架,广泛应用于深度学习研究和生产环境。 它提供了一个灵活的平台,用于构建和训练各种机器学习模型

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值