最终实现的功能:
可以控制当前页音乐的播放和暂停,可以记录当前页的播放状态,如果再次进入时音乐上次的播放没停止可以继续播放。
用到的方法
- wx.playBackgroundAudio 播放背景音频
- wx.pauseBackgroundAudio 暂停背景音频的播放
- wx.onBackgroundAudioPlay 监听背景音频的播放
- wx.onBackgroundAudioPause 监听背景音频的暂停播放
步骤:
- 点击按钮,播放背景音乐,并且切换背景
detail.wxml: 根据isPlay的状态切换音乐的背景和logo的播放
<image class="main-image" src="{{isPlay ? activeObj.music.coverImgUrl : activeObj.detail_img}}"></image>
<image catchtap="handlePlay" class="music-icon" src="{{isPlay ? '/images/music/music-stop.png' : '/images/music/music-start.png'}}"></image>
//isPlay 设置背景的切换,和播放logo的切换
//detail.js
handlePlay(){
let isPlay = !this.data.isPlay;
this.setData({
isPlay
})
const { dataUrl, title } = this.data.activeObj.music;
if(isPlay){//进行音乐播放
wx.playBackgroundAudio({
dataUrl: dataUrl,
})
}
- onLoad中监听音乐的播放和暂停
detail.js:
wx.onBackgroundAudioPlay(() => {
console.log('播放 success')
this.setData({
isPlay: true
})
})
//监听音乐暂停状态
wx.onBackgroundAudioPause(() => {
console.log('播放暂停')
this.setData({
isPlay: false
})
});
- 设置app.js中的数据,通过播放暂停时设置 data: {pageIndex: null, isPlay: false} 记录当前页的播放状态
App({
//注册小程序
data: {
//记录正在播放的页
pageIndex: null,
playFlag: false
}
})
wx.onBackgroundAudioPlay(() => {
console.log('播放 success')
this.setData({
isPlay: true
})
musicData.data.pageIndex = index;
musicData.data.playFlag = true;
console.log(musicData);
})
//监听音乐暂停状态
wx.onBackgroundAudioPause(() => {
console.log('播放暂停')
this.setData({
isPlay: false
})
musicData.data.playFlag = false;
console.log(musicData.data.playFlag)
});
- 在页面刚进入时根据app.js中记录的当前页的状态设置播放和暂停
//设置初始化显示播放对应的状态
//如果是当前页且退出时是播放状态,切换isPlay为true
if (musicData.data.pageIndex == index && musicData.data.playFlag == true) {
this.setData({
isPlay: true
})
}else{
//默认就是暂停的?
wx.pauseBackgroundAudio();
}