一.设置点击事件onMusicTap控制音乐播放
微信提供音乐播放控制器,只针对总控开关起作用,即在真机模式下,状态栏下的音乐播放控制器。
wx.pauseBackgroundAudio();
wx.playBackgroundAudio();
二(程序有6个页面,不同页面对应不同音乐)
1.解决问题:
2.通过程序图片点击控制音乐播放。
3.每个页面不同的音乐加载
4.通过2可以用图片控制总控开关,但是总控开关不能控制图片。将总控开关与程序图标开关联系,监听音乐播放完毕图标处理
5.未关闭音乐播放再次进入,图标显示音乐未播放
6.完成5后,未关闭音乐播放进入其他页面,图标变动
2.实现程序自己的音乐播放逻辑
根据当前音乐的播放状态改变音乐播放逻辑 初始化定义isPlayingMusic:false
//pause
if (isPlayingMusic) {
wx.pauseBackgroundAudio();
this.setData({
isPlayingMusic: false
})
} else {
//play
wx.playBackgroundAudio({
dataUrl: this.data.dataUrl1,
title: this.data.title1,
coverImgUrl: this.data.coverImgUrl1,
})
this.setData({
isPlayingMusic: true
})
音乐启动和暂停图标切换
src="{{isPlayingMusic? '/image/icon/pausemusic.png':'/image/icon/playmusic.png'}}"
3.实现不同音乐切换
wx.playBackgroundAudio({
dataUrl: this.data.dataUrl1,
title: this.data.title1,
coverImgUrl: this.data.coverImgUrl1,
})
4.解决总控开关和程序图标一致
setMusicMonitor: function() {
//监听音乐播放
wx.onBackgroundAudioPlay(event =>{
if (app.globalData.g_currentMusicPostId == this.data.currentPostId) {
// 播放当前页面音乐才改变图标
this.setData({
isPlayingMusic: true
})
}
app.globalData.g_isPlayingMusic = true;
});
//监听音乐暂停
wx.onBackgroundAudioPause(()=> {
if (app.globalData.g_currentMusicPostId == this.data.currentPostId) {
this.setData({
isPlayingMusic: false
})
}
app.globalData.g_isPlayingMusic = false;
});
//监听音乐停止
wx.onBackgroundAudioStop(()=> {
this.setData({
isPlayingMusic: false
})
app.globalData.g_isPlayingMusic = false;
});
}
5.未关闭音乐播放再次进入该页面,图标显示音乐未播放
删除初始化定义isPlayingMusic:false无用,因为布尔型的变量初始化为false
定义全局变量 g_isPlayingMusic:false,
if (app.globalData.g_isPlayingMusic) {
this.setData({
isPlayingMusic: true
})在onload函数中定义,处理初始化页面时,页面图标
同时在4.中根据不同音乐状态改变全局变量g_isPlayingMusic
6.完成5后,未关闭音乐播放进入其他页面,图标变动
定义全局变量g_currentMusicPostId在5后加对当前页面的判断,并在4中+当前页面和播放音乐页面一致时,才改变图标,如此,播放音乐后去浏览其他页面,回来后该页面音乐播放也能显示播放状态。其他页面图标显示也不会被音乐打乱。
改变g_currentMusicPostId在onMusicTap音乐播放时,改变g_currentMusicPostId播放音乐的id
if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId === postId) {
this.setData({
isPlayingMusic: true
})
}
onMusicTap: function(event) {
var currentPostId = this.data.currentPostId;
var isPlayingMusic = this.data.isPlayingMusic;
//pause
if (isPlayingMusic) {
wx.pauseBackgroundAudio();
this.setData({
isPlayingMusic: false
})
app.globalData.g_isPlayingMusic = false;
} else {
//play
wx.playBackgroundAudio({
dataUrl: this.data.dataUrl1,
title: this.data.title1,
coverImgUrl: this.data.coverImgUrl1,
})
this.setData({
isPlayingMusic: true
})
app.globalData.g_currentMusicPostId = this.data.currentPostId;
app.globalData.g_isPlayingMusic = true;
}
}