浮动居中方案-通过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:

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

微信小程序入门与实战之音乐播放相关推荐

【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
微信小程序入门与实战笔记
微信小程序目录微信小程序 1微信小程序介绍 1.1什么是微信小程序 1.2小程序特点 1.3对开发者的影响 1.4分辨率与rpx 1.4.1英寸 1.4.1分辨率(pt): 1.4.2分辨率(px ...
【DRF+Django】微信小程序入门到实战_day04(上)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档微信开放文档 # 课程内容 (1)P28_用户登录页面 ...
【DRF+Django】微信小程序入门到实战_day03(下)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档微信开放文档 # 课程内容 (1)P28_发送短信验证码 ...
【DRF+Django】微信小程序入门到实战_day01(下)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 文档链接微信开放文档 # 课程内容 (1)flex 布局 (2)fle ...
微信小程序入门与实战之初识小程序的自定义组件
文章列表顶部轮播图跳转为每个轮播图设置点击响应函数,为其设置参数为文章的id 小程序tabBar选项卡配置基础我们在app.json配置tabBar选项卡: "tabBar": ...
微信小程序入门与实战之条件渲染、列表渲染与小程序事件
使用LinUI的Icon组件代替图片ICON 引入LinUI的icon库: "usingComponents": {"l-icon":"/minipr ...
Taro 开发微信小程序入门与实战
目前比较流行的小程序开发框架主要有 WePY.Mpvue.Taro. WePY,Mpvue 是完全用 Vue 的开发方式来开发小程序,WePY 是比较早的小程序开发框架了,相对而言 Mpvue 的开发 ...

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