微信小程序入门与实战之音乐播放

浮动居中方案-通过left和top定位音乐图标

我们首先要让该音乐图标脱离文档流，设置 position: absolute，再通过 left: 50%;设置居中，但此时我们的居中是对图标的左侧而言，所以我们还需要减去图标一般的宽度。

.audio{
  width: 102rpx;
  height: 102rpx;
  position: absolute;
  left: 50%;
  margin-left: -51rpx;
  top: 185rpx ;
}

 <image class="audio"  src="/images/music-start.png"></image>

小程序音乐播放API

BackgroundAudioManager 实例，可通过 wx.getBackgroundAudioManager 获取。

更多属性参考微信小程序官方文档。

小试音乐播放API

设置音乐图标的点击事件，通过我们之前已经导入的文章相关信息的数组获取：

这时候我们点击音乐图标就可以看到效果音乐开始播放了，并且可以暂停：


但是这时候我们将小程序切到后台，音乐会停止播放，我们得在app.json中配置相关属性，再次尝试切后台会发现音乐会继续播放：

切换音乐播放图标的两种方案，条件渲染与js表达式

修改点击事件实现点击不同文章播放不同文章的音乐，而不是固定的数组的第一项的音乐：

在data中设置一个变量来判断当前音乐是否在播放：

条件渲染判断当前图标是什么：

通过js表达式：

音乐播放状态的切换

我们上面实现的只是从未播放状态到播放状态，我们还需要实现音乐播放时到音乐暂停，所以我们还需要实现暂停图标的点击事件：

我们还可以通过coverImagUrl设置底部播放音乐的图标：

背景音乐的监听相关API

我们之前实现的代码其实还是有问题的，当我们点击底部微信小程序官方提供的控件是，我们上面的图标并不能实现切换，所以我们就得对背景音乐事件进行监听。

同步音乐总控开关和自有播放开关的状态

我们只需要在监听函数中调用我们写好的函数即可（写在onload里）：

全局变量解决音乐状态初始化不正确问题

当我点击播放音乐后返回到主页面，再点击进入详情页，这时候英语依旧是在播放的状态，但我们的图标却还是初始默认值，我们可以通过全局变量解决这个问题。
我们在app.js中设置一个变量：

然后在我们写好的start和stop函数里面设置全局变量的改变，我们还需要在修改data中的isplaying为全局变量的值，也就是进入详情页获取到是否在播放从而设置初识图标。

让每篇文章音乐独立显示状态

再设置一个全局变量的英语的id:

判断当前的文章的音乐是否在播放：