uniapp使用uni.createInnerAudioContext()播放指定音频并且切换
- 因为做的小程序或者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.5playComm.paused = !playComm.pausedif (!playComm.paused) {// seekaudio.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.5playComm.paused = !playComm.pausedif (!playComm.paused) {// seekaudio.seek(playDetailInfo.value.duration_value) //跳转播放的时间audio.play()} else {audio.pause()}}
