1.7 背景音乐播放
2018-12-11 本文已影响15人
追梦小乐
1、显示音乐播放图标
1.1 新增音乐播放图片
post-detail.wxml
image.png
1.2 添加音乐播放的CSS代码
post-detail.wxss
.music{
width: 110rpx;
height: 110rpx;
position: absolute;
left: 50%;
margin-left: -51rpx;
top: 180rpx;
opacity: 0.9;
}
1.3 新增isPlayingMusic控制变量
post-detail.js
image.png
image.png
2、切换音乐播放图标
post-detail.js
image.png
image.png
3、背景音乐播放的特点
- 1）音乐播放不受页面关闭的影响，即使一个页面被unload掉，音乐依然会继续播放
- 2） 同时只能有一个后台音乐在播放，如果播放另外一首音乐，那么当前音乐将停止
- 3）如果用户不主动关闭音乐，那么只有在退出小程序后音乐播放才会停止，关闭当前页面是不会影响小程序音乐播放的
- 4）除了调用MINA框架的API来控制音乐播放，小程序在模拟器中还提供了一个总控开关来控制音乐的播放
4、实现单页面背景音乐播放
post-detail.js
onMusicTap:function(event){
if (this.data.isPlayingMusic){
wx.pauseBackgroundAudio();
this.setData({
isPlayingMusic:false
})
}else{
wx.playBackgroundAudio({
dataUrl: this.postData.music.url,
title:this.postData.music.title,
coverImgUrl:this.postData.music.coverImg
})
this.setData({
isPlayingMusic: true
})
}
5、监听音乐播放
上面的代码有一个小BUG，就是播放完一首歌之后，音乐图标应该恢复成未播放状态，但是 实际情况如下图所示，图标状态还是处于正在播放状态
image.png
官方API提供了以下3个方法来监听音乐播放的各种状态：
image.png
解决BUG的代码如下：
post-detail.js
image.png
image.png
然后就可以看到播放完音乐之后，图标也恢复了未播放的状态
image.png
6、全局变量与全局音乐播放
6.1 添加全局变量
app.js
image.png
6.2 获取小程序App对象
post-detail.js
image.png
image.png
6.3 修改onMusicTap方法
post-detail.js
image.png
6.4 修改setMusicMonitor方法
post-detail.js
image.png
6.5 初始化音乐播放图标的状态
post-detail.js
image.png
6.6 调用initMusicStatus
post-detail.js
image.png
可以看到，在A文章播放音乐，退出A页面后再进入A页面，音乐播放图标仍然是正在播放的状态
image.png
image.png
不过有个问题是：点击其它文章，例如B文章，还是播放了A文章的音乐
6.7 新增全局变量保存正在播放音乐的id号
app.js
image.png
6.8 保存音乐的id号
post-detail.js
image.png
6.9 修改initMusicStatus方法
post-detail.js
image.png
效果如下（都是播放各个列表的音乐）：
image.png
image.png
7、音乐总控开关
细心可以发现，模拟器上面的音乐播放器开发不能影响图标的变化
7.1 添加总控开关事件监听函数
post-detail.js
wx.onBackgroundAudioPlay(function(event){
//只处理当前页面的音乐播放
if (app.globalData.g_currentMusicPostId == that.postData.postId){
that.setData({
isPlayingMusic: true
})
}
app.globalData.g_isPlayingMusic = true;
});
wx.onBackgroundAudioPause(function(){
//只处理当前页面的音乐暂停
if (app.globalData.g_currentMusicPostId == that.postData.postId) {
that.setData({
isPlayingMusic: false
})
}
app.globalData.g_isPlayingMusic = false;
})
image.png
效果如下：
image.png
image.png
8、显示音乐的封面图片
8.1 显示音乐封面图
post-detail.js
image.png
效果如下：
image.png
image.png
