本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问题的解决方案,还请大家购买书籍进行学习实践,该系列博文的发布已得到七月老师的授权许可
授权许可0 系列文章目录
01 WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧
02 WeChat 文章列表页面(一)
03 WeChat 文章列表页面(二)
04 WeChat 模块、模板与缓存
05 WeChat 文章详情页
06 WeChat 文章评论页(一)
07 WeChat 文章评论页(二)
08 WeChat 文章评论页(三)
09 WeChat 背景音乐播放
1 背景音乐播放
我们首先添加音乐播放的图标,并设置其切换状态
播放图标随后调用 wx.getBackgroundAudioManager()
方法获取音乐实例
// pages/post/post-detail/post-detail.js
onMusicTap: function(event) {
// 音乐播放实例
const music = wx.getBackgroundAudioManager()
music.src = this.postData.music.url;
music.title = this.postData.music.title;
music.coverImgUrl = this.postData.music.coverImg;
if(this.data.isPlayingMusic) {
music.pause()
this.setData({
isPlayingMusic: false
})
}else {
music.play()
this.setData({
isPlayingMusic: true
})
}
}
若要小程序在后台仍能播放音乐,需要在在 app.json
中设置
"requiredBackgroundModes": ["audio", "location"]
音乐播放
在当前文章详情页中,音乐可以正常播放暂停,也能够切换到其他详情页播放其他歌曲,但还是有一些小问题存在,当一首歌曲播放完毕,音乐播放图标仍为播放状态,我们需要调用一下 BackgroundAudioManager.onEnded(function callback)
方法,监听背景音频自然播放结束后修改音乐播放图标状态
// pages/post/post-detail/post-detail.js
setMusicMonitor: function() {
let that = this
const music = wx.getBackgroundAudioManager()
music.onEnded(function(){
that.setData({
isPlayingMusic: false
})
})
}
当我们播放音乐后,返回列表页,再次进入详情页,此时的音乐播放图标为未播放状态,这是因为从子页面返回到父页面后,子页面会被卸载,我们只需要设置一个全局变量,将其播放状态赋值给 isPlayingMusic
这个页面变量即可
//app.js
App({
globalData: {
g_isPlayingMusic: false
}
})
在我们赋值 isPlayingMusic
的地方,都给 globalData.g_isPlayingMusic
赋相同的值即可,不要忘了在每次进入详情页时,将 globalData.g_isPlayingMusic
的值赋给 isPlayingMusic
// pages/post/post-detail/post-detail.js
initMusicStatus: function() {
this.setData({
isPlayingMusic: app.globalData.g_isPlayingMusic
})
}
保存运行之后,发现音乐播放图标终于显示正常了,但我们此时进入其他详情页,其音乐播放图标状态都变成了正在播放状态,故此我们还需要多一个全局变量,记录当前所播放的歌曲
// app.js
globalData: {
g_isPlayingMusic: false,
g_currentMusicPostId: null
}
// pages/post/post-detail/post-detail.js
initMusicStatus: function() {
let currentPostId = this.postData.postId
if(app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId === currentPostId) {
// 如果全局播放的音乐是当前文章的音乐,就将图标状态设置为正在播放
this.setData({
isPlayingMusic: true
})
} else {
this.setData({
isPlayingMusic: false
})
}
}
2 音乐总控开关
在真机上有个音乐总控开关,如果用户使用音乐总控开关来操作音乐,那么文章详情页的音乐播放图标就会出现状态错乱的问题
真机解决方法也很简单,分别使用 BackgroundAudioManager.onPlay(function callback)
和 BackgroundAudioManager.onPause(function callback)
方法进行监听音乐播放与暂停事件,从而设置文章页面的音乐图标状态,使得音乐图标状态和音乐播放状态保持一致
setMusicMonitor: function() {
let that = this
const music = wx.getBackgroundAudioManager()
music.onEnded(function(){
that.setData({
isPlayingMusic: false
})
app.globalData.g_isPlayingMusic = false
})
music.onPlay(function(){
// 只处理当前页面的音乐播放
if(app.globalData.g_currentMusicPostId === that.postData.postId) {
that.setData({
isPlayingMusic: true
})
}
app.globalData.g_isPlayingMusic = true
})
music.onPause(function(){
// 只处理当前页面的音乐暂停
that.setData({
isPlayingMusic: false
})
})
app.globalData.g_isPlayingMusic = false
}
该章节的内容到这里就全部结束了,源码我已经发到了 GitHub WeChat_09 上了,有需要的同学可自行下载
End of File
行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢和关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^
网友评论