1.功能需求：
1）小程序后台可以继续播放音频
2）音频播放，暂停，播放进度时时更新
3）进度条拖拽
2.效果图：
3.直接上代码
index.wxml文件（没啥可说的，小程序slider组件）
slider相关属性参考官方文档：slider
<view class="progress">
<view class='audiosBox'>
<view class='slid'>
<!-- 进度时长 -->
<text class='times'>{
{startTime}}</text>
<slider bindchanging="sliderChange" bindchange="sliderChange" block-size="16rpx" color="#F2F2F2" step="1" value="{
{progress}}" max="100" selected-color="#7490EF" block-color="#7490EF"/>
<!-- 总时长 -->
<text class='times'>{
{duration}}</text>
</view>
</view>
</view>
<view class="pause">
<!-- 播放,暂停图片展示-->
<view class="audioOpen" bindtap="audioPlay" wx:if="{
{!isOpen}}">
<image src="{
{isOpen ? 'https://fs.partner.luboedu.cn/meditate-project/web/playPause.png' : 'https://fs.partner.luboedu.cn/meditate-project/web/playPagePlay.png'}}"></image>
</view>
</view>
index.js文件
参考小程序背景音频API BackgroundAudioManager
1）首先获取全局唯一的背景音频管理器
const backgroundAudioManager = wx.getBackgroundAudioManager()
2）从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。
{“pages”: [“pages/index/index”],“requiredBackgroundModes”: [“audio”]}
3）通过接口获取音频播放源，注意音频播放源不要有汉字！不要有汉字！不要有汉字！会导致苹果手机报错code：10003，文件错误。即使通过encodeURI(‘src’)，苹果手机有时还是会播放不了。
data: {
src: '', // 音源
isOpen: false, // 控制播放暂停图片显示
startTime: '00:00' , // 开始时间
progress: 0, // 进度条步长
duration: '', // 总时长
},
// 接口调用，获取音频信息，在onLoad中调用该方法
getData(){
// 可以封装一下微信请求数据的方法，这里就不封装了
wx.request({
url: 'https://www.xxxxx',
method: 'post',
data: data,
success: function(){
// 请求成功，更新音频数据
this.setData({
src: res.data.src,
duration: res.data.duration
})
// title必须有并且不能为空，否则苹果手机会报错，设置src后，音频自动播放，不必执行play方法
backgroundAudioManager.title = res.data.unitTitle
backgroundAudioManager.src = this.data.src
// 可以通过onError方法监测音频错误
backgroundAudioManager.onError((err) => { console.log(err)})
}
},
// 播放和暂停事件比较简单，直接调用方法
// 暂停事件
audioPause () {
backgroundAudioManager.pause()
this.setData({ isOpen: false })
},
// 播放事件
audioPlay () {
backgroundAudioManager.play()
this.setData({ isOpen: false })
}
// 进度条拖拽
sliderChange(e) {
let duration = this.data.duration
let offset = parseInt(e.detail.value) / 100;
// 音频跳转时间
let time = parseInt(duration * offset)
// seek() 方法跳转到指定时间，单位S
backgroundAudioManager.seek(time);
},
// 背景音乐播放进度，在背景音频播放时调用该方法起到监测的作用，用来时时更新当前播放时间以及进度条步长
currentTimeChange(){
backgroundAudioManager.onTimeUpdate(() => {
let offset = backgroundAudioManager.currentTime;
let current = parseInt(offset)
let duration = backgroundAudioManager.duration;
const progress = parseInt((current / duration) * 100)
this.setData({ progress: progress, startTime: time.timeDuration(current) })
},
// 监测播放结束
endPlay(){
backgroundAudioManager.onEnded(() => {
console.log('监测播放结束')
// do something
})
},
// 监测音频停止
stopPlay(){
backgroundAudioManager.onStop(() => {
console.log('监测音频停止')
// do something
})
}
写在最后，当音频处于播放状态时，点击列表中该条音频，应该是继续播放而不是重新播放，此时可以判断一下当前音频是否是播放状态，如果是的话，不做任何操作（此时音频会继续播放），不是的话赋值src和title进行播放
4.errorCode说明
