折磨我致死的uni.createInnerAudioContext()

今天项目用到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 
			},

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

发布了4 篇原创文章 · 获赞 4 · 访问量 594

猜你喜欢

转载自blog.csdn.net/SoQBulingBuling/article/details/105563198