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.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()
}
}