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进行播放