13. 尚硅谷_mpVue_背景音乐播放暂停的功能实现.avi原创

好，我们继续上课，那么上一节课呢，我们把这个收藏的功能实现了，哎，这节课呢，我们去整那个我们之前做过的一个就是音乐播放，哎，音乐播放首先要整套的话呢，是不是还是我们在这儿呢，需要整一个图片对吧？需要整一个图片，那这个图片的话呢，呃，我们还是去找一下static下边，呃，然后呢，Images下边，我们有个music下边，对吧，有个start，有个stop可能上来stop。哎，那这个东西首先我们去给他。定位一下。那这个时候呢，我们可以来一个比如class，哎，我们这儿起一个叫music image，对吧，来来到下边的话呢，我们在这儿呢，去写一写样式，那首先。呃，先给他设一个宽度啊，它呢应该是60RPX，高呢也是60RPX。

要定到这个图片的中间。因为它总高呢是多少呢，是460，而这个图片大小呢是60对吧，也就上边230，下边230，呃，图片的一半也说距离上下的边距是不是应该是200啊哎，所以呢，我们可以在这这样去写，你比top这样呢，200RPX呃就可以。哎，就可以好，哎，那这个呢，刚去光去算这个了，我们是不是应该先去干嘛呢？呃，Of a对吧？好，那这个时候呢，我们来看一下。点击一下过来，哎，是不是在这儿了，然后再去整一个哎，Left，那这个时候呢，我们可以用什么50%，然后呢，在这呢，应该是market left。然后再来个负的30RPX是不是就可以啊啊这个呢，也经常用到我们布局里边，你比如像什么双飞翼布局啊，圣杯布局里面其实都有它啊，都有它好，那这个时候呢，来我们再看一次点击过来。

哎，图片是不是在中间了，那接下来呢，我们要做的流程呢，跟刚刚的差不多，哎，首先呢，要给这个绑定一个点击事件对吧，Handleler，我们叫它music，哎，Play，那点击它是不是要修改一个状态啊，哎，所以呢，我可以在这，哎先去添加一个啊，添加一个is，哎，Music play那上来是fo。对吧，上来是放，而且呢，这儿啊，先给他写个注释，这个呢，哎，是用来标识我们的音乐是否。播放。你那个图片是不是也不能写死呀，哎，也不能写死，那它显示是stop还是start，是不是应该根据我这个标识来决定啊好，那这个时候呢，我们把这个拿走，应该呢，给人家先整一个单引号，然后呢，后边是不是还应该有一段，如果为处哎是什么是start，那我就把这个改一下。

好，那剩下的我们是不是需要去定义这个处理函数啊，回调函数来把这个呢收起来，然后呢，在这我们再去写一个，哎，该方法呢，是用来来处理。音乐播放的好，那首先我们是不是上来应该去修改那个状态，Is，呃，还式music play等于什么呢？取反点is music play没问题，然后点。是不是等于我们刚刚拿到的这个值啊好，那这个时候呢，我们再去做什么事情呢？要真正的去实现我们的音乐播放，对吧，微信点哎，那这个API呢，再带大家去找一下，在这儿来到媒体这一块往下，哎，其实我发现我们在讲完学生小程序的时间也不是太久，但是我发现他又多了很多的API，那这些呢，我们其实自己呢都可以下来去干嘛，哎，去测一下啊，在这呢，我们直接找到我们背景音乐播放，哎，一个叫play。

是他吧，哎，这是我们之前用的一个，那下边呢，我们待会儿是不是要用到这两个，哎，以及后边我们会用到这个属性啊。来，先把这个API拎过来。那这个API在这呢，它是直接写吗？啊，其实也不是啊，这个我们直接写过，我们应该去判断什么啊，判断我们这个是否为触，如果说它为触，哎，如果是它为触说明什么？是不是要音乐播放呀，那else呢，是不是要暂停啊，暂停的话我们去找的是哪个呢？是它下边这个。

啊，它下边的这个，包括后边还有什么manager，这是又更新的啊，又更新了，那这个呢，应该是可以用才对。好，那在这的话呢，里面需要传一些参数，那这个暂停的话呢，是不需要的，在这儿我们看一下他之前传的参数呢。呃，有哪些呢？一个叫他data URL，一个title，那这个data URL是不是音乐的链接啊，Title呢，是我们啊歌曲的什么标题，而这两个东西啊，你说在哪呢。是不是要到对应的那个对象里面去取啊，对象其实我们已经更新过了，对吧？所以呢，在这我可以这样去写，那它等于this.detail OB，它是不是有个music这个对象，哎，有个music这个对象，我们可以看一下music里边是不是有这两个，这是我提前呢准备好的，好，那其实就是他俩，哎，就是他俩把这个拎过来，然后呢，换上去就可以了，好，那这个时候呢，来到我们的项目，我们看一下。

走，你。哎，没有什么问题，暂停走暂停好，没有问题，那接下来再反向操作对吧，就是要监听我们音乐的播放和暂停，那这个呢，我们也讲过，首先在哪监听，你说现在。哎，之前我们是不是在load的啊，那现在用view开发的话，咱应该是在那个before，什么before mount里边，对吧？那如何监听呢，要用到它对应的API啊，那这个API呢，一个是on the background play，对一个呢是什么啊暂停好那。

另一个过来，我们往上走走，是不在这呀。在这呢，我们要做的工作呢，是那接听音乐的播放和暂停一个它，哎还有一个就是在下边，哎，我们用这个。OK拉过来，那这儿呢，对应的是个call back，那我们就给它写一个call back，好，那这个是接听音乐播放，那下边这个呢，就是接听我们音乐的暂停没有问题，好呃，我们还是测一把吧，那这个呢是音乐播放，哎，同样的道理，在这呢，它应该是什么？应该是暂停。来来到我们这一块。走，你音乐播放走走走是不能监测得到啊，好，那当音乐播放的时候，我们要做什么事情呢？你是不是要去修改我们的状态点is，哎，Music play，为什么这是固定的为true，那同样的道理，在这一块它是不是应该为false呀？

那这个时候。再来测一把。点击。播放暂停走走走走没有问题，那接下来我们再去把这个背景图去整一下啊，这个呢就比较简单了，背景图是不是这个呀，那也就是说这个东西到底能不能写死呢？不能，它应该根据我们的那个is来music play，如果说它为处是一种。放呢，又是一种，我们应该是找到这个music下面是不是有个cover image OK，那这个时候来再测一把。

走。走走好，看上去没问题了，对吧，是最后一个问题，就是说当我退出去再进来啊，它应该是播放，而其他的页面呢，是暂停才对，那现在出现这个和我们刚刚那个做收藏是不一样，那这个呢，是因为它组件有一个缓存啊，有一个缓存，所以呢出现这个，但是呢不准确。啊，也就是说我们需要把哪个页面在播放的信息。是不是存起来呀，哎，存起来，我们原之前在原生小程序里边，咱是存到哪儿了呀。哎，是不是存到ABAPP中了，那现在我们说过这儿不能存，哎，刚刚我们是不是放到，哎，有同学说了存到VX里边，那其实在这儿存到vvo X行不行呢？肯定行啊，肯定行，但是呢，你就这两个状态，你存到那呢，其实稍微有点啰嗦啊，稍微有点啰嗦，在这儿呢，我想了一个办法。

咱们看看行不行，Data这呢，我还是再去创建一个哎GS文件。Is。So，你哎这是不是有个文件啊，那在这呢，我去export被fo一个对象，我把数据呢放到外边，哎放到这儿上来，我们初始化一个哪个页面在播放的下标，然后呢，哎这个页面呢，是否在播放，是不为false呀，那这个数据我们会以。哎，来到我在这是不是能拿到它，比如ISA play obj，然后呢，诶from上一集，上一集S下边的ISA play。

这是不是能拿到呀，能拿到好，那这个就好比说我们之前get APP是不是拿到的那个对象呀。那对象拿到了之后干嘛呀，是不是当我音乐播放和暂停的时候，去动态的修改里边的状态值就完了。对吧。哎，这个呢，哎，可能有的同学第一次看呢，我给你写一个注释啊，哎，这个是标识页面的下标二，那这个呢，是标识页面啊，音乐是否在播放啊，是否在播放好，那当我们的页面一旦播放了，你是否去修改一下才对，Is play obj的page index等于什么？哎，等于this.index对吧，然后呢，Is OB接点。

Is play是不是应该为呀，同样的道理，一旦我暂停了，我是不是去声明一下这个状态啊，对吧，那在这儿呢，它应该为什么为放用不用改下标呢。不用了啊，这个之前我也解释过，你想当我去点击暂停的时候，那这个时候我是不是应该是从播放的状态过来的呀，那播放的时候他是不是已经修改过这个下标了，所以呢，能审一行代码，哎，是一行啊，能省一行是一行。OK，那这是一个，那其实我们还少一件事情，是不是要去。干嘛？哎，判断当前页面加载的时候，哎音乐是否在播放，那这个是什么意思呢？就是。来我进来，我这儿点击播放。

然后呢，我出去再进来，我是不是要判断这是播放还是未播放的状态啊，那这个怎么判断呢？就是说呃，那个is play OB，首先它的配件index是不是要等等于我们当前页面的下标才能说明是同一个页面啊，哎，并且呢，并且什么。并且这个is play obj里边的这个。Is play是不为true才行啊，哎，当他们成立了，那你说我要干个什么事情啊，我去修改一下我当前页面的这个状态，为什么为处，哎，否则的话呢，我把它修改为。是不是就可以啊。好啊，这个呢比较长比较长，大家再看一下，我在这儿呢啊，就一行代码就搞定了啊，一行代码搞定了，那我们来测一把。

进来未播放好，除去再进来，对的吧，关键是到下一个来，它应该是未播放才对吧，包括是我们之后的，你比如看个假经文档，然后再播放，我是把。把刚刚那个页面的暂停了，去播放我自己页面的呀，那这个时候我们回过头来再看它，这应该是未播放的状态才对。好，OK，没有问题，那这样的话呢，我们就把音乐播放的功能呢，哎，全部实现了，好，那本节课呢，就讲到这里。