微信小程序背景音频开发
最近又新开发了一款听书类的小程序，现在一阶段已基本完工。代码已开源，链接在文章结尾。欢迎star。
本期给大家讲解一下关于背景音频开发的一些基本业务场景和踩坑。
1.需求拆解
先来看一张图：
从图中可以看到，基本的业务包含以下几个部分
- 播放
- 暂停
- 切换上一个音频
- 切换下一个音频
- 拖动进度条改变音频进度
- 音频进度时间
- 音频总时间
- 在音频列表切换任意的音频
还有一个需求就是在小程序退出以后，还会播放：
在上图里看到，当背景音频播放的时候，会出现上方这个小图标：
同样的，在手机的通知栏里面，长这样子：
接下来我们动手实现一下整个功能。
2. 技术分析
要想实现背景音频，我们需要使用微信小程序提供的一个API：getBackgroundAudioManager()，因为我这里使用的UNI开发的，所以直接贴的是UNI的文档了。具体方法参数可以查看文档。
这里注意以下几个点：
- ios App平台，背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加
"UIBackgroundModes":["audio"]才能保证音乐可以后台播放（打包成ipa生效） - 小程序平台，需在manifest.json 对应的小程序节点下，填写
"requiredBackgroundModes": ["audio"]。发布小程序时平台会审核。 - 在page.json中添加
"UIBackgroundModes":["audio"]。 - 配置完以后，重新编译一下项目。
3. 功能实现
3.1 播放slider
1.获取音频数据
在进入播放音频页面的时候，默认获取一下第一个需要播放的音频。我这里是是根据音频的id去获取音频的详情信息：
/**
* @description: 获取专辑声音详情信息
* @returns {*}
*/
const getTrackInfo = async (trackId: number) => {
try {
const res = await albumsService.getTrackInfo(trackId)
trackInfo.value = res.data
audios.trackId = res.data?.id as number;
createBgAudioManager()
} catch (error) {
console.log(error)
}
}
onLoad((options) => {
const { trackId } = options
audios.trackId = trackId
getTrackInfo(trackId)
})
getTrackInfo返回的的数据里面长这样的：
播放音频需要设置红色框标识的字段。
2.创建音频
请求成功，拿到音频详情数据，就需要创建背景音频。
// 初始化背景音频控件
const bgAudioManager = uni.getBackgroundAudioManager();
/**
* @description: 修改音频地址
* @returns {*}
*/
const createBgAudioManager = () => {
// 音频测试地址
// innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
if (bgAudioManager) {
// 若原先的音频未暂停，则先暂停
if (!bgAudioManager.paused) {
// stop和pause是不一样的，stop直接停止播放，然后从头开始
bgAudioManager.stop();
}
bgAudioManager.title = trackInfo.value?.trackTitle;
bgAudioManager.coverImgUrl = trackInfo.value?.coverUrl
// 设置了src以后会自动播放
bgAudioManager.src = trackInfo.value?.mediaUrl;
// bgAudioManager.autoplay = true;
initAudio(bgAudioManager)
}
}
这里注意一下，title是必须要设置的。不然音频不播放。当设置了src以后，音频会自动进行播放，无需设置autoPlay。
3.获取播放进度和音频总长度
在上面的函数里面，有个initAudio函数。
/**
* @description: 初始化音频相关的方法
* @param {*} ctx
* @returns {*}
*/
const initAudio = (ctx: any) => {
ctx.onTimeUpdate((e) => {
// 当拖动进度条的时候不需要更新进度，使用seek方法
if(!sliders.isDraging) {
// 获取当前进度
const currentTime:number = ctx.currentTime
// 跟新音频进度和slider进度
if (currentTime) {
sliders.progressTime = ctx.currentTime
audios.currentTime = formatTime(currentTime);
}
}
})
ctx.onCanplay(() => {
setTimeout(() => {
console.log('音频长度', bgAudioManager.duration);
// 音频长度,时分秒格式
const duration = bgAudioManager.duration
audios.duration = formatTime(duration);
// 进度条长度=音频长度
sliders.max = duration
}, 300)
})
ctx.onPlay(() => {
audios.playStatus = true
})
ctx.onPause(() => {
audios.playStatus = false
})
ctx.onEnded((e) => {
// 播放结束自动切换到下一首歌
nextAudio()
})
}
在onCanplay中，我们可以获取音频的总长度，注意这里的setTimeout必须加，不然获取不到duration。这里需要把秒格式和时分秒的格式都保存下来。
在onTimeUpdate中，我们可以获取到当前音频播放的进度。然后实时更新进度条。
接下来就是进度条的实现了。
这里我用的是uni内置组件中的slider组件。
<slider
step="1"
activeColor="#f86442"
block-color="#fff"
block-size="10"
:min="0"
:max="sliders.max"
:value="sliders.progressTime"
@change="sliderChange"
@touchstart="handleSliderMoveStart "
@touchend="handleSliderMoveEnd"
/>
max必须设置，也就是音频的总长度。
value值是当前音频播放的进度。
4.拖动进度条
当拖动进度条的时候，触发sliderChange事件，改变音频的进度。
/**
* @description: 进度条改变事件
* @returns {*}
*/
const sliderChange = (e) => {
console.log(e);
// 拖动slider的值
const position = e.detail.value
seekAudio(position)
}
/**
* 音频跳转
*/
const seekAudio = (position: number) => {
bgAudioManager.seek(position)
// 修改当前进度
audios.currentTime = formatTime(position)
sliders.progressTime = position
}
这里通过seek方法来设置进度的跳转。
当拖动进度条的时候，在onTimeUpdate中也在修改进度。两个之间会打架。所以这里我们在onTimeUpdate中使用isDraging字段来控制。当鼠标按下和抬起的时候来控制isDraging的值，不让onTimeUpdate修改进度。
/**
* @description: 开始拖动进度条事件
* @returns {*}
*/
const handleSliderMoveStart = () => {
sliders.isDraging = true
}
/**
* @description: 结束拖动进度条时间
* @returns {*}
*/
const handleSliderMoveEnd = () => {
sliders.isDraging = false
}
// 此逻辑在前面的代码有了
ctx.onTimeUpdate((e) => {
// 当拖动进度条的时候不需要更新进度，使用seek方法
if(!sliders.isDraging) {
...
}
})
3.2 播放暂停
播放和暂停就非常简单了。
通过playStatus字段来控制播放和暂停按钮的样式切换即可。
其次是事件：
/**
* @description: 暂停音频
* @returns {*}
*/
const pauseAudio = () => {
bgAudioManager.pause() // 停止
}
/**
* @description: 播放音频
* @returns {*}
*/
const playAudio = () => {
bgAudioManager.play() // 播放
}
// 在钩子函数监听
ctx.onPlay(() => {
audios.playStatus = true
})
ctx.onPause(() => {
audios.playStatus = false
})
3.3 音频列表渲染和切换
这个列表怎么渲染的我就不讲了。这里还有个下拉刷新和上拉加载更多的功能。
当点击某个音频，获取对应的id，然后请求接口获取对应的音频详情。接口和流程跟之前的一样。唯一注意的是，当我们点击的是正在播放的一个音频的话，啥也不要做。还有一个注意的点，当切换音频的时候需要先暂停，然后再设置src和别的属性。
const createBgAudioManager = () => {
if (bgAudioManager) {
// 若原先的音频未暂停，则先暂停
if (!bgAudioManager.paused) {
// stop和pause是不一样的，stop直接停止播放，然后从头开始
bgAudioManager.stop();
}
bgAudioManager.title = trackInfo.value?.trackTitle;
bgAudioManager.coverImgUrl = trackInfo.value?.coverUrl
// 设置了src以后会自动播放
bgAudioManager.src = trackInfo.value?.mediaUrl;
// bgAudioManager.autoplay = true;
initAudio(bgAudioManager)
}
}
注意这里的暂停不是pause，是stop。
3.4 上一个下一个切换
当切换上一个和下一个音频的时候，逻辑也是需要票拿到对应的id，然后请求音频详细数据。
/**
* @description: 切换上一首音频
* @returns {*}
*/
const prevAudio = () => {
// 判断是不是第一首，是则提示
const firstId = audioList.value[0]?.trackId
if (firstId === audios.trackId) {
uni.showToast({
title : "当前已经是第一首了",
icon : "none"
})
return;
}
// 获取上一首的id
// 从播放列表寻找
let id = 0;
audioList.value.forEach((item, index) => {
if (item.trackId === audios.trackId) {
id = audioList.value[index - 1]?.trackId
}
})
getTrackInfo(id)
}
/**
* @description: 切换下一首音频
* @returns {*}
*/
const nextAudio = () => {
// 判断是不是最后一首。是则提示
const len = audioList.value.length
const lastId = audioList.value[len - 1]?.trackId
if (lastId === audios.trackId) {
uni.showToast({
title : "当前播放列表已是最新的了，请加载更多",
icon : "none"
})
return;
}
// 获取下一首的id
// 从播放列表寻找
let id = 0;
audioList.value.forEach((item, index) => {
if (item.trackId === audios.trackId) {
id = audioList.value[index + 1]?.trackId
}
})
getTrackInfo(id)
}
这里只需要注意的是，如果是第一个和最后一个音频，需要做特殊处理。
3.5 播放结束
最后，当某个音频播放结束的时候，直接请求nextAudio函数即可。
ctx.onEnded((e) => {
// 播放结束自动切换到下一首歌
nextAudio()
})
到此为止，我想要的功能基本全部实现了。
4. 更多功能
- 实时上报播放进度
- 音频地址防盗
- 付费，免费体验功能
5. 代码地址
完整代码地址参考：gitee.com/xiumubai/li…
来源：juejin.cn/post/7226228585371041848
