最近在写一个文章列表,点击每篇文章进入文章详情页面,会有不同的背景音乐,点击返回,背景音乐仍然会在后台播放
在app.js的onLaunch函数中
//获取全局唯一的背景音频管理器
this.appMusic=wx.getBackgroundAudioManager();
在app.json中配置在后台运行的功能
"requiredBackgroundModes": ["audio"],
在详情页面的onLoad函数中,调用一下方法
setMusic (){
//若连着两次进入 同一个页面,则不需要设置音乐,直接是后台正在播放的音乐
//在a页面将音乐停止或者正常播放完,再次进入同一a页面需要重新设置音乐,所有有了后半部分的判断
if ((app.globalData.postID != this.data.postID) || (app.globalData.postID == this.data.postID&&app.globalData.isStop)) {
console.log('需要设置音乐')
app.appMusic.startTime = '10'
app.appMusic.src = this.data.musicIndex.url;
app.appMusic.title = this.data.musicIndex.title;
app.appMusic.coverImgUrl = this.data.musicIndex.coverImg;
}
//监听音乐播放
app.appMusic.onPlay(() => {
console.log('音乐播放了');
this.setData({
isStart: true
})
});
//监听音乐暂停
app.appMusic.onPause(() => {
console.log('音乐暂停了');
this.setData({
isStart: false
})
});
//监听音乐停止
app.appMusic.onStop(() => {
console.log('音乐停止了')
app.globalData.isStop=true;
this.setData({
isStart: false
})
})
//监听到音乐播放完了
app.appMusic.onEnded(()=>{
app.globalData.isStop = true;
this.setData({
isStart:false
})
})
},
在点击详情页面的,控制音乐播放暂停的小图标
<image wx:if="{{isStart}}" src="/images/music/music-stop.png" class="music" bindtap="goMusic"/>
<image wx:else src="/images/music/music-start.png" class="music" bindtap="goMusic"/>
goMusic (){
if(this.data.isStart){//需要暂停
app.appMusic.pause();
}else{//需要播放
//若是音乐停止之后的播放
if(app.globalData.isStop){//从头播放
app.appMusic.startTime = '10'
app.appMusic.src = this.data.musicIndex.url;
app.appMusic.title = this.data.musicIndex.title;
app.appMusic.coverImgUrl = this.data.musicIndex.coverImg;
}else{//接着暂停的开始播放
app.appMusic.play();
}
}
this.setData({
isStart:!this.data.isStart
})
},
判断两次进入的文章详情是否是同一篇文章
//当从详情页面 返回列表页面,会执行onUnload
onUnload: function () {
//目的保存上一个页面的id,再次进入这个页面音乐会接着播放
app.globalData.postID=this.data.postID;
},