持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
浮动居中方案-通过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:
判断当前的文章的音乐是否在播放：
