1）小程序后台可以继续播放音频
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进行播放
