uniapp使用uni.createInnerAudioContext()播放指定音频并且切换

uniapp使用uni.createInnerAudioContext()播放指定音频并且切换

1. 因为做的小程序或者h5需要视频讲解或者音乐组件的 默认展示播放按钮，当点击播放的时候 显示暂停音乐这样的一个效果。

在unipp中我们直接只用uni.createInnerAudioContext()代替audio，使用更加方便，更加简洁，uniapp内部创建并返回内部 audio 上下文 uni.innerAudioContext 对象。

1.创建uni.innerAudioContext

直接使用内置api不需要引入下载

const audio = uni.createInnerAudioContext()

创建完成 把你想要播放的音频给到audio

const audio = uni.createInnerAudioContext()
audio.src = "http://xxxxxxx"

这样我们就创建完成并且把音频已经给到了audio，接下来就是就是需要一个方法去播放暂停

const audio = uni.createInnerAudioContext()
audio.src = "http://xxxxxxx"
audio.play() //播放  //注意 先要把音频给到audio再去进行播放  
audio.pause() //暂停

现在已经实现了一个基本的播放音频了，下面深入详解

2.深入了解uni.innerAudioContext

倒计时

倒计时，首先我们需要先获取到当前播放音频的总时长，然后获取到当前播放到那一秒

<slider class="audio-slider" activeColor="rgb(248, 78, 81)" block-size="8"
:value="playDetailInfo.current_value" :max="playDetailInfo.duration_value"
@change="handleChange"></slider>

这个组件是uni内置的一个组件滑动选择器。可以使用当成音乐倒计时。

然后我们需要在点击开始播放的时候，获取到时间

const audio = uni.createInnerAudioContext()
audio.src = "http://xxxxxxx"
audio.play() //播放  //注意 先要把音频给到audio再去进行播放  

//获取总时间赋值
playDetailInfo.value.duration_value = innerAudioContext.duration 

然后去获取当前播放的时间，使用onTimeUpdate内置方法进行监听，然后去赋值给滑动组件，那么滑动组件会根据当前的时间滑到对应的位置

	audio.onTimeUpdate(() => {
		// 获取当前播放的总时长，单位：秒
		const currentTime = audio.currentTime;
		if(currentTime > 0){
		playDetailInfo.value.current_value = innerAudioContext.duration 
		}
		initLyric()
		// console.log('当前播放时间：', currentTime);
	});

上一首，下一首，暂停，播放

当点击切换歌曲的时候，上一首或者下一首的时候，我们的歌曲地址，包括进度条时间，都会发生改变，对应着新的播放音频

上一首或者下一首

	const handleChangePlay = (val) => {
	//1是上一首，其他是下一首
	//playComm.tabDate是我们的播放列表，当前的歌在播放列表中
		// if (val == 1) {
			playComm.tabDate.forEach((el,index) => {
				console.log(el.sid , playInfo.sid)
				//判断我们当前播放的歌，在播放列表中索引是多少，如果找到了之后 
				//找到后如果是下一首那么我们把当前歌曲切换 并且抛出错误终止循环
				if (el.sid == playInfo.sid) {
                    if (playComm.tabDate[ val == 1 ? index + 1 :  index -1]) {
					     nextSong(playComm.tabDate[val ==1 ? index + 1 : index -1],index)
					     throw Error();
                                  }else{
					       nextSong(playComm.tabDate[val ==1 ? 0 :playComm.tabDate.length - 1],index)
					       throw Error();
				       }
				}
			})
		// }
	}
	
	//清空事件
		const nextSong = (item, index) => {
		playDetailInfo.value.current_value = 0 //当前播放时间清空
		playComm.paused = true  //播放按钮或者停止按照变
		playInfo.sid = item.sid //当前播放的id赋值
		playInfo.nickName = item.nickName //当前播放的歌词名字
		playInfo.name = item.name //当前播放歌词谁唱的
		setTimeout(()=>{
			playDetailInfo.value.duration = convertSecondsToMinutesAndSeconds(innerAudioContext
				.duration)
			playDetailInfo.value.duration_value = innerAudioContext.duration
		},500)
		playMusic()
	}
	
	//播放事件开始结束
		const playMusic = () => {
		console.log(123)
		audio.src = playInfo.souce;
		
		audio.volume = 0.5
		playComm.paused = !playComm.paused
		
		if (!playComm.paused) {
			// seek
			audio.seek(playDetailInfo.value.duration_value) //跳转播放的时间
			audio.play()
		} else {
			audio.pause()
		}
	}

顺序播放，循环播放

在事件onEnded播放完成里面实现

	audio.onEnded(() => {
	//顺序播放
		if (!playComm.xunhuan) {
			handleChangePlay(1)
		}else{ //随机播放
		// 传入当前列表获取随机
			const X = getRandomItem(playComm.tabDate)
			console.log(X)
			nextSong(X)
		}
	})
	
	const getRandomItem = (array)=> {  
	    // 生成一个从 0 到 array.length - 1 的随机索引  
	    const randomIndex = Math.floor(Math.random() * array.length);  
	    // 返回数组中该索引对应的元素  
	    return array[randomIndex];  
	}  
	
	
	const handleChangePlay = (val) => {
	//1是上一首，其他是下一首
	//playComm.tabDate是我们的播放列表，当前的歌在播放列表中
		// if (val == 1) {
			playComm.tabDate.forEach((el,index) => {
				console.log(el.sid , playInfo.sid)
				//判断我们当前播放的歌，在播放列表中索引是多少，如果找到了之后 
				//找到后如果是下一首那么我们把当前歌曲切换 并且抛出错误终止循环
				if (el.sid == playInfo.sid) {
                    if (playComm.tabDate[ val == 1 ? index + 1 :  index -1]) {
					     nextSong(playComm.tabDate[val ==1 ? index + 1 : index -1],index)
					     throw Error();
                                  }else{
					       nextSong(playComm.tabDate[val ==1 ? 0 :playComm.tabDate.length - 1],index)
					       throw Error();
				       }
				}
			})
		// }
	}
	
	//清空事件
		const nextSong = (item, index) => {
		playDetailInfo.value.current_value = 0 //当前播放时间清空
		playComm.paused = true  //播放按钮或者停止按照变
		playInfo.sid = item.sid //当前播放的id赋值
		playInfo.nickName = item.nickName //当前播放的歌词名字
		playInfo.name = item.name //当前播放歌词谁唱的
		setTimeout(()=>{
			playDetailInfo.value.duration = convertSecondsToMinutesAndSeconds(innerAudioContext
				.duration)
			playDetailInfo.value.duration_value = innerAudioContext.duration
		},500)
		playMusic()
	}
	
	//播放事件开始结束
		const playMusic = () => {
		console.log(123)
		audio.src = playInfo.souce;
		
		audio.volume = 0.5
		playComm.paused = !playComm.paused
		
		if (!playComm.paused) {
			// seek
			audio.seek(playDetailInfo.value.duration_value) //跳转播放的时间
			audio.play()
		} else {
			audio.pause()
		}
	}