00:00
好的,我们继续啊,那上节课呢,我们实现了这个音乐的播放和暂停的功能。啊,那这节课呢,我们继续看啊,大家看啊,我点击一个播放。嗯,我把音乐啊给它关掉,然后呢,呃。啊,我还得打开,大家要听一下这个声音,我这播放我暂停没有问题对吧,那我再播放,看着我点击这一侧的暂停。哎,这个模拟器上的暂停啊,这个在真机上呢,就是由我们系统弹出的这个控制音乐的那个。啊,播放的那一栏,那么在我们手机上呢,从屏幕的上边,哎,用手下拉的话是可以拉下来的。如果点击这儿的话,它也能暂停音乐,可是呢?页面上的状态不对劲啊,页面上的状态呢,还显示的是正在播放。那么页面上这个状态由谁来决定呢?是不是由当前页面这个变量a play决定啊?那现在的a play还是出?
01:00
现在的问题是啥呢?当我们点击系统栏的这个音乐啊,控制播放和暂停的按钮。对吧,那我们页面上的状态是错的。页面并不知道用户点的点击的是系统的这个。控制音乐的这个播放和暂停的按钮。所以没有及时的去修改这个状态。嗯,再说一遍,用户操作系统控制音乐播放和暂停按钮的时候,我们的页面并不知道,所以呢,页面不能及时的去更新这个是否播放的状态标识,导致我们页面显示的状态和实际音乐播放的状态不一致。哎,这是问题。那如何解决这个问题呢?那如何解决这个问题呢?那我们就需要知道音乐什么时候播放或者暂停了。
02:01
对吧,那这个时候呢,我们需要来到官网还是看这个实例啊,我再点击一次它会展开。那么在这个里面呢,大家看一下这个实力身上呢,有很多的监听。嗯,有很多的阶梯,你比如说这个OM什么pass。对吧,On play来我们随便点一个on,我们看一下,它呢用于去接听我们背景音频的暂停,世界对应的里边是一个回调。嗯,因为我们系统的这个,呃,控制音乐这个播放栏呢,它是控可以控制音乐的播放和暂停。所以啊,这两个监视我们都需要写。既要控制播放,又要监听它的什么呀,暂停。对吧,那这个东西有了啊,On past,那大家想想看啊,我们在哪去接听啊,那这个呢,我先给它停掉吧,转的头晕。
03:01
哎,部署监听的动作呢,就好像我们平时装一个摄像头一样。这个装摄像,这摄像头的动作呢,应该是只发生一次。对吧,而且呢,一定是要在你监视的这个事情发生之前,我们装上去。那么装上去放在那就好了,我们坐等这个事情发生,我去监视他就好了。所以啊,针对于这个情况呢,我们应该是在哪去接听它呢,应该是在这个load中。首先。只执行一次。再有lo是上来最先执行的钩子函数啊,它呢发生在页面加载的时候。是不是上来就揭示,那么部署好揭示以后,那你之后用户再点击播放也好,点击暂停暂停也好,我是不是都能够揭示得到呀。哎,好来我们从这啊写,那刚才呢,我们有一个问题是什么。嗯,哎,如果对吧,哎,我们用户他呢,操作这个系统的控制啊,我们音乐。
04:08
嗯,播放啊,或者说暂停了这个按钮的时候。对吧,页面啊不知道。导致什么导致我们页面显示这个是否播放的状态和真实的音乐。嗯,播放状态不一致对吧,这是问题,那么解决方案啊,就是我们需要干嘛呢?啊,通过这个啊,控制音频的实力啊,哎,控制我们音频啊,音频的实力去干嘛去监视我们音乐的啊这个播放和暂停。嗯,这是我们要做的事情。那么这个音频的实例我们之前在哪啊,在这个控制音乐播放的这个功能函数中有是它对不对。
05:01
哎,是他。我给它放到这儿,那么这个实例有提问啊,我在这儿呢,我能不能直接去部署这个接听。啊,比如说我在这儿呢,要去监视。哎,我们,哎这个音乐播放。嗯,还有暂停,嗯,我能不能通过这个实例呢,直接去点你说on past,哎,或者我们先来个on play吧。嗯,还有我们再来一个可以吗?嗯,想想看。不行,因为在这里根本没有这个实例,哎,我们之前呢,是通过let变量在点击。播放的时候,我们什么才调用这个回调调用调用这个功能函数啊,我们才创建的实例。又是不是有作用的问题啊,根本访问不到,所以啊,这个创建的时机也不能放在这儿。有点晚,我们应该再早一点,早到什么地方呢?在控制这个呃音乐,呃,在监视这个音乐播放暂停之前,我们就该创建好。
06:09
同时这里要用我们下边。这是不是也要用?那两个想要都能访问到的话,最简单的方式啊,大家看我这样去写,我不用let定义了,我通过race。哎,我去把这个实例呢,添加到race身上的一个属性,那这样的话,我们只要页面在啊,那是吧,都可以随时通过race这个实例去访问到它。嗯,没有问题啊,那这样的话呢,就解决了这个跨作用域的问题。好的,那这个时候啊来。我们把里面的回调写上,那这呢对应的话也应该有一个回调,我们把这个呢也给它放进来。啊,这里呢,我们先做一个打印输出啊,那这个呢是啊play。下边这个来我们这儿呢,应该是暂停。
07:01
对吧,好的,那现在啊,我们来到我们的页面。来到。来啊,把这个控制台清一下啊,练习走。嗯,过来了以后啊,我们去播放。大家能接听到暂停也能接听到,那么现在这个监听的是监听的是我通过页面上的我们自定义的按钮,什么控制这个播放和暂停啊。那接下来呢,我再通过系统的这个控制音乐的按钮再试一次啊走。播放暂停,诶是不是也能接听得到。哎,能接听得到就好办了,那么我知道你的音乐播放和暂停了,那我对应的是不是就可以去修改这个状态了,我把这个打印就去掉了。啊,在这里面呢,我们要做的事情是啊,修改我们音乐啊是否播放的状态,对吧?this.set一个data。
08:02
我们要修改的是is,那这个呢,为处。因为它是play嘛,播放对吧,那么再往下暂停的话呢,那这应该是fast。嗯,没有问题。那么在这儿修改了,大家想想看啊,我们回头再看,在我们点击播放或者暂停的时候,这个还要不要。嗯,你这播放或者暂停的时候,你这是不修改了一次啊,如果监听的时候再修改一次,其实做的是。投案的工作,所以呢,在这儿我们就不需要了。啊,也就是说我们一边写一边去完善我们之前的代码。对吧,好的,那现在呢,我就把这个删掉了。嗯,或者给大家留着啊,大家知道我们之前在这儿写过,现在呢,不需要了。哎,我们放到这儿了,没有问题。那那这个时候我们再看一次啊过来。
09:00
练习走。嗯,我去播放暂停没有问题,我再播放,我通过这个啊暂停。播放暂停。是不是就好了呀,哎,没有问题,那这样的话呢,我们就解决了这个系统栏控制音乐播放暂停啊,导致我们页面显示不一致的问题。那其实除了播放暂停啊,我们还有一个东西呢,需要做一下,那就是系统。在我们真题上呢,也会有一个停止的叉号,用户点击这个叉号呢,是可以把我们当前页面的音乐直接停止掉。你想音乐停止了这个状态是不是也要修改成未播放的状态?对吧,那么在真机上这个停止的按钮叉号在哪呢?在这个右上角在这儿呢。哎,为了让大家看的清楚一点呢,来过来我呢截了一个图啊,用我的手机啊。
10:02
来我给大家打开啊,那你们到时候在真机上去体验的话呢,在这一侧,嗯,在这里。嗯,然后大家点击一下这儿呢,哎,点击一下这啊,你可以看到的是这张图。这张图。在这个图里边,你看这就是我们当初设置的那个音乐的标题开头。对应的代码在哪呢?就是当初我们控制音乐播放的时候,这不设了一个title吗?是他。然后我们能看到啊,右侧这儿是不是有一个叉号。如果说用户人家点击的是这儿的叉号,那么当前的音乐直接就停止了。停止了以后呢,我们一定要把页面的状态也修改成is play为false。所以啊,我们怎么知道我们用户点击的那儿呢?我们并不能知道,我们只能知道音乐什么时候停止。那么对应的啊,我们还应该再去揭示一个东西,就是熬的什么呀,那。
11:01
Ended。是这个。啊,那这个呢,是接听什么音频自然播放结束啊,那这不是我们想要的自然播放结束就是正常的播放结束,而我们要的是什么音乐的停止,那么这个停止呢,对应的是哪啊,是这个stop。嗯,那这样的话,你看它是监听背景音频停止事件来来到对应的代码这一块啊,我们再去写一个东西啊,那就除了播放暂停,我们还要揭示它的。什么呀啊,停止。代码复制一份。然后呢,往下一放,嗯,那这呢我们改改啊,那这个呢是on stop。停止的时候将状态也修改成放就好了,那这个呢,在模拟器上啊,我们看不到。啊,看不到,在真理上才能看到这个效果。好的,那么现在啊,我们已经写完了这三个解释了,大家回头再看,你会发现我里边的这三段代码长得一模一样。
12:05
那这样写肯定不行啊,这代码重复度太高了,所以呢,针对于这个修改状态呢,我们可以去分装一个方法对吧?啊,那这个呢,专门用于去修改我们这个啊播放状态的。的功能函数,嗯,那这个呢,就是change这个,哎,Play state啊,我分装一个函数,嗯,而里边的代码呢,其实就是这一段。但这个东西呢,它不能写死呀。你到底要修改为true还是false,你是不是得告诉我,所以呢,这传一个A的。哎,Airplay就是状态,那这个时候呢,我们用的是这个变量airplay对不对。嗯,又因为同名的属性,按照ES6啊对象的简写方式,我们是不是可以省略不写呀。好的,那这样的话啊,对应的这个方法,我们可以在这去调用一下啊。调一下来Z点它一定要用,那这呢应该传的是to。
13:04
对吧,因为这揭示的是播放。那么下跌这些呢,我们都可以替换掉了。嗯,那这两个呢,传的是什么呀,False。啊,那这样的话呢,我们代码量很明显,是不是一下少了很多呀。啊好,那这节课呢,啊,我们主要是利用监听啊,利用我们这个音频的监听去实现了这个控制器。啊,系统的控制栏和页面状态显示同步的问题。好的,那这节课呢,我们讲到这里。
我来说两句