6-11 playBackgroundAudio-音乐播放基本实

点击音乐播放图片，图片改变，音乐开始或者暂停。在“播放图片”上catchtap绑定事件onMusicTap

下面开始实现函数

小程序的音乐播放有一个特点：不主动关闭，就算切换页面，也不会停止，除非调用停止按钮，而且切换页面后，会有总控开关。音乐播放其实比较复杂，涉及多个页面的播放关系，总控开关和自己定义开关的关系。播放实现有两种，一个是API音乐播放控制八个方法，一个是现成的媒体播放组件audio里已经实现好的。

下面讲自定义的api。

启动和暂停

wx.playBackgroundAudio(OBJECT)

使用后台播放器播放音乐，对于微信客户端来说，只能同时有一个后台音乐在播放。当用户离开小程序后，音乐将暂停播放；当用户点击“显示在聊天顶部”时，音乐不会暂停播放；当用户在其他小程序占用了音乐播放器，原有小程序内的音乐将停止播放。当时在同一个小程序内，不同页面跳转，音乐是不会停止的。

参数说明：

dataurl 音乐原文件地址。音乐数据不能放到本地哦，只能是流媒体文件。大小也不能符合。

title

coverImgUrl 也必须是网络文件。但是只有真机上才能有效果。

这时候只能总控开关，但是新闻详情页面并没有总控开关，把页面退出后，只会出现在微信首页。所以只能自己实现音乐播放逻辑。

音乐路径：

http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46

要有一个音乐播放的状态，如果是音乐播放，点击之后就是暂停，如果是音乐暂停，点击之后就是播放。用一个变量实现效果。

暂停： wx.gauseBackgroundAudio

在data里面设置一个运行状态变量isPlayingMusic，读取目前是否播放的状态，默认false。

判断是false还是true，选择播放或者暂停。并改变运行状态变量。如果isPlayingMusic是真，也就是现在正在播放，那么启动“暂停函数” wx.gauseBackgroundAudio，同时改变isPlayingMusic状态。相反，如果是假，说明已经停止了，那么wx.playBackgroundAudio(OBJECT)，同时也改变isPlayingMusic就行了。

下面实现点击音乐图标，改变图标为另外一种暂停或播放。

改变音乐/播放图标。通过数据绑定，三元运算符。通过isPlayingMusic的ture和false选择哪一张图片显示。并且在音乐点击事件中，设置data中的isPlayingMusic状态。

对比一下，wx:if 和三元运算符，切换不同的图片的两种方法。

 每篇文章应该不同音乐，音乐和其他数据一样，实际从服务器获取。现在在post-data.js中填充音乐数据。

流媒体音乐不好找，暂时用一个吧。

把上面的dataUrl，coverImgUrl，title改写成从post-data.js获取。

先自己找一下，能找出多少问题，之后再优化它。