00:00
好的继续啊,那上一节课呢,我们是已经实现了这个音乐的这个信息啊,动态的显示了啊,没有问题,那这节课呢,我们真正的去做这个音乐播放和暂停的功能。那么之前呢,我们针对这个点击播放和暂停按钮,这儿呢,我们已经有一个事件了,对吧,哎,就是这个,那这个呢,是世界的回调。那么你每点击一次呢,就要切换一次状态,要控制音乐的播放和暂停,对不对啊,那我们接下来要实现一个功能啊,所以呢,我在这呢,去给它分装一个啊,那这个呢是控制啊,我们这个音乐我们播放啊,还有它暂停呢,功能函数注意啊,上边是回调,而下边这个是什么是。功能。对吧,那对应的功能名称呢,我们可以叫它一个music control音乐的控制来,那对应的函数我们写到这。
01:02
那到时候你不管说是想要播放还是暂停,你去调用我这个回调就OK。对吧,好,那调用我这个回调啊,大家看我们之前呢,在点击播放暂停的回调里面,是不是修改了一下这个最新的播放状态呀。对了吧,那除了要修改这个状态以外呢,你是不是得告诉我这个功能函数,你让我去帮你播放还是暂停啊。所以我们应该把这个状态传进去。啊,当然了,那这呢,是不是应该去声明一下这个行参呀。然后在对应的功能,呃,函数里面,首先我们要上来要判断。哎,如果这哥们为兔,哎,我们要干嘛,对吧?嗯,Else呢,我们要干嘛。那这我们都应该很清楚,那上边这个是不是要去音乐播放。啊,音乐播放,嗯,好,下面这呢,那就是要去啊暂停我们的音乐对吧。
02:05
那么要控制音乐的播放和暂停啊,我们又需要看一下我们的官方文档。在还是在API这一块啊,来到我们的媒体,那这一把呢,我们要玩的是这个啊,注意它里面有个音频,还有一个叫背景音频。我们要玩的是这个。背景音频相较相较这个音频而言的话呢,它呢是手机。小程序即使后台了以后也可以播放,同时在我们锁屏界面呢,也能看到有播放音乐的这个任务栏。哎,这就是背景音频,那么在这个里面呢,来我给大家点击一下这个啊background audio manager,这呢,你看这个实例可以通过这个方法,微信点get这个方法来获取。那么对应的这个方法呢,我们访问一下啊过来。首先呢,我们通过这个get background audio manager呢去获取全局唯一的背景音频管理器。
03:06
这哥们儿是唯一的。它呢可以控制所有的音乐播放啊,那这个时候呢,我们要意识到啊,其实在我们全局,你不管有多少首音乐,同时只能有一首在播放。所以呢,只需要有一个集中管理者就OK。好,那对应的这个API我们知道了。啊,通过它呢,我们是不是要可以创建这个实例呀,有了实例我们可以干嘛呢,大家看。首先这个实力身上呢,有个src属性。啊,对的是个字符串,你呢给这个实例呢,设置一个新的src的时候呢,它就会自动的开始播放,来我们玩一把啊。那么在这儿呢,我们要去创建一个。音频的实力。对不对。来啊创建,嗯,控制音乐。
04:02
那播放的实例对象。哎,是这个API。来,那前面呢,我去接收一下啊,那这个呢,就叫它一个background啊,Audio manager吧。哎,等于哈。没有问题啊,因为他是全局唯一的管理者管理音频的,所以也不需要传什么参数。好的,那么实力有了以后呢,接下来呢,我们去给他身上呢,添加一个src属性,我们这儿呢,是不是需要一个音乐的链接就好了。啊,音乐的链接,那现在的问题是我们还没有音乐的链接啊。啊,没有音乐的链接,那可能有的同学说啊,那我们之前呢,不是拿到一个音乐的歌曲详情吗?那里是不是有呀。来,过来。我们看一下我们这个桑迪T啊,详情里面啊,在这个里面呢,其实并没有什么音乐的想,呃,这个播放链接。
05:00
那么想要拿到音乐的播放链接呢?我们还是要看接口文档。啊,网易云音乐呢,针对于音乐的播放地址的专门提供了一个接口。这个接口你看啊,需要通过一个参数ID去获取,那不用说这个ID一定是音乐的ID,好的我们玩一把。来测一下这个接口啊,同样的还是local house的3000,我们把这个练习啊,这个ID我们复制一份呢,给到这一侧,然后我们去请求一下。好的,那大家看啊,这个时候呢,拿到这个data数组中第一个对象的URL,就是当前练习这首歌的播放链接,你看啊,这是点MP3格式的,没有问题,好的,那么接口地址也有了,那接下来我们是不是需要在。设置这个播放链接之前,我们要去拿一下这个链接呀。对吧,哎,那我们就在这里边去拿呗。
06:02
那那如何去拿这个链接,那我们可以在这个他真正要播放之前去拿,我们可以在这儿去拿,这都没关系啊,那这个呢,是获取我们音乐的播放链接。我看let music吧,Link。嘛啊,等于a request。对应的接口地址。我们给他拎过来。是这个呗。来放到咱的项目啊,那么对应的参数是不是一个ID给他测啊拿走。写上啊,嗯,ID对应的是不应该是我们当前音乐的ID啊。对吧,啊,音乐的ID因为是个变量啊,所以呢,我们应该是你谁让我去控制音乐播放,你除了告诉我要播放还是暂停,你还应该把你的音乐ID给到我,那我们就再提取一个参数。
07:01
那这样的话呢,谁调用我们,谁是不给我们传入实参呀。啊,我们音乐ID有没有啊,有当初呢,我们在nold这是不是拿到过一个。没有问题,但是呢,我们是在里面定义的一个变量。对吧,定那个变量。然后在这个函数中,你是没有办法直接拿到的。那怎么办呢?我们要把这个musicd放到一个公共区域啊,所以呢,大家看啊,我可以把这个呢拎到我们的data中啊,那这个呢是音乐的ID。你用ID没,那当初在我们拿到music ID的时候呢,我们可以先把它呢更新到了。更新到我们的data中。那这样的话呢,贝塔中是不是有了。得塔中有了以后呢,来往下翻啊,我这划的慢一点,你在这里调用我这个回调在当前的函数,我们可以去拿一下这个银元ID呢,从data塔中。
08:01
那这里呢,那就是music ID,同时我们把music ID给它进去。嗯,就好了,哎,这儿呢,用了a wait啊,所以呢,我们前面我们自己分装这个函数呢,是不是可以用成啊S。嗯,没有问题,好的,那这样的话呢,这个数据。我们就能够拿到了,拿到了这个数据以后呢,我们去更新一下啊,那data数组下标取零的URL是我们要要的对不对,那这样的话呢,你看着啊,我再去定一个变量let music link吧,等于什么。那等于我们上边这个对象的贝塔,它是个数组,下标取零对吧,里边的URL就是我们的音乐链接。那么音乐链接也有了,哎,我们就可以把这个呢给到这儿。嗯,同时我们将刚才那个注释呢,就可以打开了。好了,那现在我们来看一下啊,我们的音乐能不能播放。
09:03
嗯,来给它隔开一点。那这个时候呢?来看一眼。呃,你看啊,我们现在呢,每次一改代码呢,它整个项目重新编译,可是呢,每次加载的呢,都是每日推荐页。而我们现在要壳的呢,是里边的页面,那这个时候我问一下大家,我们现在能不能为了方便将里边这个页面呢提到。第一个。哪提到第一个呢,就是在这个全局APP点阶层中配几次数组,我能不能把D页面提到上面去。那现在不行啊,注意,如果你仅仅是静态页面搭建,你完全可以把它提上去,可是现在呢,我们的数据已经写成动态的了,而当前页面的动态数据呢,是要依赖于外边。页面点击跳转路由传参是不是要传一个歌曲的ID啊?
10:00
所以啊,这个时候不能提上去,一旦提上去以后,我告诉你,那这个时候的options里面没ID find,那么后边的东西就错了。啊,就错了。所以啊,现在即使说是每次加载完的是这个detail,是这个recommend。我们也不要觉得烦,还是应该点击进来。哎,那就是这个啊,那接下来呢,我们真正的去播放一下音乐啊,大家看着会有一点问题走。你看音乐并没有播放。啊,其实在早期的话,这个API这啊,它是会有一个提示的。那么现在呢,没有这个提示呢,那我就直接跟大家说。为什么音乐啊,没有播放呢?来啊,稍等一下啊,刚才可能大家没听到,我把这个音乐打开。那我再播放一次。这个时候他还是没有啊,他播放不了啊,为什么呢,来过来。在刚才我们说看这个实力身上的SRG属性的时候呢,我们继续往下啊,在这个里面呢,还有一个属性叫开口。
11:07
首先先来看这,它是一个变形的。在你不设这个音乐标题的时候。他是不会给你播放音乐的啊,早期的话,如果没事啊,控制台会有个警告啊,现在没有,那这个还是不知道他为什么改成这样。嗯,但是咱们知道了这个以后呢,我们可以去做一下来。首先这个实例这呢,我们还应该去给人家设置一个title音乐标题,那这个标题呢,通常放的是当前歌曲的名称。歌曲的名称我们有没有?当然有。对吧,啊,我们都把这个歌曲的名称什么放到了这个窗口的标题这儿了。哎,是它,所以呢,在这里啊,我们也可以这样去用当前some对象里面的name,就是我们的歌曲名称。好的,我们再来看一眼过来。来练习。
12:00
我们点击播放走,嗯,那这个时候大家看啊,可以播放了,嗯,我先暂停一下。啊,这也暂停一下吧,那这边音乐暂停了以后,你看这。这儿有一个警告啊,说若需要,小程序在退到后台后继续播放音乐。你就需要在这个阶层中设置这个字段。在APP的阶层中啊,设置它。嗯,这就看大家以后的需求,如果说真的需要后台继续播放,我们就可以去设置这个字段。那这个字段如何去设置呢?我们去看一下官网的APP点阶层的说明啊。那这个时候啊,我们来到框架这。来,我先打开个页圈,拖到前面去,在小程序配置中的全局配置呢,就是我们APP点阶层的描述。往下翻,我们找到刚才哎,提示我们的这个属性。那需要在后台使用的能力,如音乐播放。好的,那我们点击一下啊,看一下详细的说明。
13:03
那下面呢,有一个例子就是他。它对应是个数组啊,里边呢有两个选项,这两个选项分别对应的是这两个后台能力。一个是后台音乐播放,一个是后台定位啊,就是地图定位。那现在我们用的是音乐播放,对吧,我们把这个复制一份,然后啊,我们来到全局这里面,我们继续往后去追加一个字段。就他呗,啊,因为我们用的音频啊,所以呢,我可以把地图这个先给它删了吧,啊,我们用不上。好了,那这个时候呢,我们再来看一下咱的项目啊,过来走。OK啊,那这时候播放。嗯,没有问题,我点暂停,大家看我点这儿根本不管用。对吧,根本不管用,为什么呢,因为我们。回到我们GS啊,我们暂停,这还没有做任何的处理。
14:02
那么如何通过这个实例去暂停我们的音乐呢?来,还是要看这个官网,找到这个实例。在这个background audio manager这呢,那么前面这些我们看到这都叫什么,都叫属性。对吧,我们往下翻,除了属性呢,它对应的还有方法。方法里面,首先我们能看到的就是这几个。播放暂停,跳转到指定的位置以及stop停止。那这个时候呢,我们需要是暂停啊,所以呢,我们用到的是pass这个方法。那那也比较简单啊,呃,在else这儿呢,我们通过这个实例去调用一下什么这个pass方法。那这个时候我就要问大家一个问题了啊,你说我在这儿直接这样写,有没有什么问题?对吧。好好看一下,首先有没有觉得这个background audio manager呢?显示跟上面有点不一样,上面是高亮的,这不高亮还带了个波浪线,说明它肯定有问题。
15:04
啊,直接这样写不行,他肯定会报错,为什么呢?在else里面根本没有这个变量。有同学说这个if里面不有不有吗?那你别忘了,我是用let定义的变量。Let定义的变量呢,有块级作用域啊,所以在这里面访问不到。啊,现在是if和else是不是都要这个变量啊,所以啊,我们应该是把这个先提到if的外边去。嗯,那这样的话呢,是不是都能够访问到,嗯,没有问题,来,那这个时候啊,我们再来看一眼。好了,那现在呢,还是练习啊过来。OK,来,我们播放。嗯,暂停。没问题,播放暂停。啊,好的吧,那这样的话呢,这个基本的啊,播放和暂停的功能我们就做完了,那么下边这大家看到的这个呢,其实它是在模拟我们真机上那个啊,控制播放和暂停的系统的那个板块啊,那个区域待会儿呢,我会让大家看到啊,这就是模拟真机上的一个东西。
16:15
好的,那这节课呢,我们实现了这个音乐的播放和暂停啊,我们主要用到的是小程序官方提供的一个背景音频控制的一个实例对象啊,通过微信点这个方法来创建。然后呢,我们还通过音乐的ID呢,去拿到我们当前音乐的播放。链接,进而去让它播放。哎,这是我们整体的一个思路啊,好的,那这节课呢,我们先讲到这里。
我来说两句