21. 尚硅谷_微信小程序_音乐播放基本功能实现.avi原创

OK，来，咱们接着上节课来讲，那么上节课呢，我们实现的是这个收藏的功能，那这节课我们来做这个音乐播放啊，音乐播放首先你看一下我这个头部这个图片里面有个小图片啊，它的也不是写死的，你看着我，当我点击音乐播放的时候，这个图图标是会切换的，并且呢，背景图片也会切换，而背景图片也会切换，而我们要实现的是这个叫音乐播放，嗯，那这个时候呢，这个叫背景音乐播放，什么叫背景音乐呢？大家写完可以拿你们的手机去测一下，比如说我们打开一个酷狗音乐，那你打开以后，你后台的话，你会发现你手机上最上面那个导航栏是不是有个音乐播放。啊，那个呢，就叫背景音乐播放，嗯呃，来，我们先来做一些简单的，先把这个图片整上去，呃，先把图片整上去，OK，来到这一块，来把调试器关掉，跳这首先这个image，注意这是我们的have image是那张大图，那也就是说除了它以啊，除了它以外呢，我们还应该有一个。

那这些东西不要，嗯，Src这呢，我们应该也是一个动态的图片，那这个动态的图片我们要去哪找呢。Music下面这不有个start，有一个stop，哎，就是这两张图，这两张图，那么到底用哪张图的话，我们也得去根据一个标识来决定，所以呢，来到GS这一块，我会先去给他定一个标识，比如说A啊，我们来个music可以上来为fo。OK，那么我们现在要根据这个标识去判断一下，如果说它为触啊，说明音乐是不是在播放，那这个时候呢，我们去找一下may，诶，这应该给它加一个，注意我这有有要得用双引号，因为外边是不是有个单引号了，好，那这个时候呢，我们来一个images下边，我们来一个music下边。

那来什么呀？应该是这个music_start.p。嗯，没问题，那后边这个我们是不是就不要了。嗯，我这是刚删到哪了。应该这个都不要对了吧，接下来再来一个，那这个时候呢，我们来一个images下边，哎，我们来一个music下边，然后呢，这一把应该是music啊stop.p击。OK ctrls保存一下。

来点击一下这个list，我们跳到这儿，首先这个图标上来应该是对的，这是一个暂停的那个，如果说播放的话，这有个音符，OK，那现在图片有了，我们把它定位到中间这一块，那现在我需要找到我们的GS啊，首先要定位这个图片，我是不是可以去给它一个类啊，OK，那这个时候呢，我来一个class，我们就叫它music image OK，那这个东西是不是也得给了谁啊？咱们应该是有两个一位值才对吧，哎不用，因为现在我是不是用这种三元表达式啊，OK，来找到这个类，我们来到最下面点一个它，哎首先肯定有个宽高，那这个应该是62PX。啊，来一个高度，嗯，62PX好，宽高有了以后我们还要做什么事情，那想都不用想，应该是整一个look对吧？呃，Top是多少呢？

我们可以算一下整体的高度是多少，还记得不，460，我图片是不是要居中啊？200你居中这个点是不是距离上面的距离是230，两百三你是不是还得减去我图片的一半，所以是不是正好是对200那left呢？其实还有一种方式，我能不能这样50%，但是50%它不是居中的吧，有个叫me负的多少30。往回拉一下不就可以了，OK ctrl s保存来，我们来看一下。

对的吧，那接下来我们再做一个事情，点击的时候去切换这个图标的显示。那是不是应该给这个绑定一个解析事件，首先来个，那这个呢，我们叫做handle music play处理音乐播放，OK，那这个呢，我们来到GS这一块，那现在样式不要，我就关掉它，继续往下写。当前的函数我们是处理啊，音乐播放的啊，比较简单的是什么？我们还是那个A，我是不先能从data里面取到这个状态啊，Is music等于什么直接区分这点data点。是不是拿到这个值，那这个套路我们刚刚已经整过了，所以我就直接写了set，这是不是直接把它放进来，OK，来CTRLS保存一下。

我姐姐呢？对的吧，可能这个看的不清楚啊，可能有的同学会想，你现在整这个页面，为什么每次你一刷新的话，我是不是它是会从例子开始加载啊，我现在能不能让他上来就加载DT呢。可以，嗯，如果是上来的加载的话，我肯定不会每次这么烦，从这边往后点，为什么？哎，对，咱们现在就跳页面的数据是不是动态写的，而这个动态是要因为list跳转过来的时候，是不是给了我们一个下调所那如果说你上来直接接跳的话，是没有那个下标的。汇报错的。OK，那这个整完了以后啊，我们就要真正去实现这个音乐播放了，要整这个，那肯定还是去看我们的文档。

音乐播放你说我选哪个类？哎，很好，这是不是有个媒体啊，往下走，这有个音乐播放控制，其中第二个我们看play background audio来点击一下，嗯，使用后台音乐播放音乐，嗯，这个你们可以下来看一下，首先这个方法我们需要大家看一下，它需要传哪些参数呢？Data URL音乐链接的后边对应的是一些格式，这个音乐是需要你给一个链接，对吧？那我们能不能这样，我把一首MP3的歌放到我们当前的项目，然后我直接从本地找他呢？为什么不行？哎对，他一共就两招，你把音乐直接拿过来肯定不行，那下面这个title的是音乐的标题，哎，Cover image URL是分辨URL，那现在我们先用这两个data URL和title，对吧，一个是最起码你得有音乐链接。

OK，那这个我们要在这去干嘛了，去控制。我们的音乐播放，那这个控制音乐播放，你说我上来就让他播放吗？每次一点进我就让他播放吗。不一定。因为你比如说我点一次播放，我再点一次呢暂停，那我们是否播放音乐，或者是否暂停音乐，你是不是应该根据这个标识来呀，所以咱是不是还得去判断一下它啊，如果说。它为处在这我们是要去干嘛，哎，咱们在这应该是去播放音乐，当然了，在else呢，在这它应该是暂停音乐，OK，那播放音乐这我们刚用到这个API，其实也没有什么技术含量，我就直接拿过来了，调这个API里边需要传一个配置对象。

OK，那首先我们需要的两个数据是什么呢？一个叫data URL，那还有一个是不是叫title呀？啊，应该是英文的，那这两个东西在哪呢？也是我提前分装这个数据里面，这是不是专门有一个music，这不URL吗？这不title吗？这不封面吗？数据都有，那这些音乐链接呢，你们也可以自己去找你们自己喜欢的，不过现在你们可以用这个啊，这些呢，我我也是自己去网上去随便扒的一些音乐。注意，只能找快列音乐啊，找这种音乐链接OK，那想要拿到某一个对象里边的音乐，你是不是还得要一个东西啊？

要什么呀，要下标，但是我们别忘了，我们在当前这个页面上，咱们最上面。是不是有那个对象啊，既然有对象，其实我是不能从对象里面直接去获取它来一个。我直接因为我要取两个数据对吧，贝塔点得OB间，咱是不是要往出取这个东西，其实我还少写了一个，今天欧倍接是不是这个对象。你是不是应该取对象下面的music？大家能懂吗？我们现在要解构的是不是这个对象呀，哎，所以我在这继续去干嘛，对点music。

这是音乐播放，那我们直接把暂停的也写上得了，暂停更简单。呃，刚刚那个是音乐播放。再看这个第三个暂停播放，都不需要你传参数，直接调用这个API，所以呢，我直接CTRLC把它呢拿过来放到这一块。来，那这个时候我们CTRLS保存一下。呃，点击一个。我开始让它播放。现在播放的音乐，呃，用的就是我刚刚给他的一个链接，那这个title是干嘛的呢在这。这个就是那个标题，嗯。懂吗？啊啊，其实每个是不一样的，我可以把它关掉啊呃，我找了分别找了几个吧，你比我点这个。

这不是这是另外一个吗？对，这是另外一个，我们看一下暂停走。是不是可以暂停啊啊，那这样的话，其实我们已经实现了一个基本的音乐播放，OK，那我先把这个视频停一下。