小程序学习（6）——在现有基础上做音乐组件

在之前的基础上已经将前边的界面搭配的基本上是可以看了，这个时候做我们的音乐播放功能。大体功能其实和收藏功能类似。

前边已经完成了以下内容

我们要做的就是在这个上边可以播放音乐，即一点击音乐按钮即播放音乐。

一、播放功能实现

首先在前端“.wxml”中的音乐图标上写上一个点击事件。来响应我们点击时的变化。catchtap="onMusictap"

在脚本文件中开始对点击事件的描述
1、因为每篇文章的音乐肯定是不一样的，所以我们需要把每篇文章的ID都要获取到，才可以区分每一篇文章的音乐。
方法与之前类似，通过data中自定义的一个变量来接收ID的值

var musicID=this.data.currentPostId;

2、通过数据文件的id来获取状态
因为没有绑定数据库，文件都是写在数据文件中的，所以我们来获取状态

var luoji = newlistDB.newslist[musicID].music;

3、现在我们就到了考虑改变播放按钮改变的地方，点击播放是一个样子，暂停是一个样子。musictab是一个状态，用来判断图标是否改变，做成了本脚本文件的全局变量，存放在data中。默认为false

 var musictab = this.data.musictab;

在前端，这个时候我们可以使用收藏的方法，用“wx:if”和"wx:else"来实现。也可以使用其他方法，这个地方我们使用三目运算符来计算图片的引用方法。

 src="{{musictab?'/images/music/music-stop.png':'/images/music/music-start.png'}}"

4、判断musictab的状态是播放还是暂停状态。
如果是false,那么调用暂停的API，否则调用播放的API，然后对相应状态进行数据绑定。

if (musictab) {
        wx.pauseBackgroundAudio();
        this.setData({
          musictab: false
        })
      } else {
        wx.playBackgroundAudio({
          dataUrl: luoji.url,//URL连接
          title: luoji.title,//标题
          coverImgUrl: luoji.coverImg//背景图
        })
        this.setData({
          musictab: true
        })
      }

这样我们的音乐基本功能就可以实现了。

二、修改

1、同步问题

实现之后发现，在我们点击暂停的时候，他和总控台弹出的控制按钮并不会达到同步，如图所示

这个时候我们就需要解决这个问题了，如何使总控台和我们的点击按钮可以同步

这个时候在开发者文档中，我们就看到了另外一个API，监听音乐API

一个监听音乐播放
一个监听音乐结束

因为我们要在文章一开始就监测到状态，那么我们在整个界面刚一打开时就启动检测状态，即放在onLoad里边让他在页面打开的时候就开始工作。

 //监听音乐播放是否启动
    var that=this;
    wx.onBackgroundAudioPlay(function(){
      that.setData({
        musictab:true
      })
    }),
    wx.onBackgroundAudioPause((function(){
      that.setData({
        musictab:false
      })
    })

2、全局变量

设置全局变量之前，我们在退出播放界面后，重新进入之后，图标变回了原样，但是音乐仍然在播放，没有实现同步的效果，这个时候就需要了全局变量。
来实现变化的同步。

首先在app.js中定义一个全局变量，来行使作用

接下来在要使用的脚本文件中引用，引用格式如下

var app=getApp();

因为我们是要在一开始就获取到状态，并且还要搭配着监听API使用，那么肯定也是需要放在onLoad里边的。

那么就引用他并判断我们当前的状态

因为onLoad中的代码太长，就将监听的部分分离了出来，如图，我们首先判断当前全局变量的状态是什么，如果正确就切换到对应的状态中，而在监听中，我们需要听过监听到的信息，在数据绑定之后也同步修改全局变量的状态。这样就可以保持一个不变的样式。

3、音乐与图标的变化

在修改完这些东西之后，会发现还有一个很大的东西没有改变，就是我们的文章页播放按钮的变化，并没有因为每次播放的音乐在不同页而变化，在一个页面播放音乐，点进去其他页面，还是在播放这个音乐，这肯定是不可以的，我们就需要改变他，让他可以根据ID来自主根据音乐播放页的不同而变化。

这个时候因为涉及到了多页面的变化，所以单一脚本变量肯定是不够的，就需要了使用全局变量，方法如上一个内容。

接下来在上边我们判断全局函数的地方，加上我们对ID的判断

这样就可以获取到ID的不同了，但是光这样还是不可以的，我们还应该考虑到在我们点击播放的时候，要把ID传给他，否则怎么进行ID判断，在没有播放之后，就应该就获取到的ID清空，这样就不耽误下一个ID值得进入了，是吧。

音乐的部分就是这些，我还是代码+注释放在github上，要不csdn的积分伤不起。

GIT源码+注释