首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何用AIScratch制作音乐播放器

这里讲解一个综合案例:用AIScratch制作音乐播放器,只需要简单的几个精灵就可以,里面有强大的全网搜索功能,可以搜索任何歌曲,有播放、暂停、取消、选择、上一首、下一首对歌曲的操作功能,小伙伴们需要慢慢的一步一步的开始跟着我的操作。

工具/原料

伯宏AIScratch图形化编辑器

方法/步骤

1第一步:准备好一下精灵,分别是:背景图、进度条、小球、两个按钮图片,如图所示,可以根据自己的爱好摆好位置。

2第二步:设置好精灵们的初始属性,如图一:先设置背景的初始位置,图二、图三是设置两个按钮的坐标及朝向,这三个运用的是绝对定位(不会跟随别人的移动而移动),而小球和进度条必须在一起,所以就用了相对定位(会随着指定目标移动而移动),我们让小球随着进度条移动,如图三,设置好进度条的朝向及坐标以后将其坐标放入两个变量(jx、jy)里面,然后看图五,设置小球的坐标要与jx、jy有联系。这样,所有精灵都设置完毕了

3第三步:准备功能,及精灵的初始属性设置完毕以后,就要开始制作功能了,首先我们制作查找功能。我们先新建我们需要的变量(进度、剩余时间、当前歌曲、数目库(数组变量)),如图一所示,其中,进度变量是记录当前歌曲的进度,剩余时间是记录当前歌曲剩余播放时间(单位:秒),当前歌曲变量是记录当前歌曲是曲库的第几首歌,数目库(数组变量)是储存搜索出来的所有歌曲名。变量弄清楚以后,就开始制作搜索歌曲功能,该功能通过按键触发,然后发送广播,接着添加输入框,让用户输入,满足输入条件就添加歌曲名字到数组里面,然后让当前歌曲变量加一。

4第四步:我们制作选歌播放功能,如图所示,先停止歌曲,然后发送广播,添加输入框,让用户输入数目,满足条件,就将当前歌曲变量,设置为用户输入的数字,这样,就完成了选歌播放功能了

5第五步:第三第四步都有发送广播程序块,它的作用就是控制小球的移动和旋转,如图所示,根据不同的广播消息,控制小球的不同状态,当用户不想听这首歌,取消播放了(就会发送广播消息:取消播放),我们就让它回归起始位置,当用户在听歌(发送广播消息:开始播放),我们就让它移动及旋转。

6第六步:这个时候就可以制作播放歌曲了,不过播放歌曲有三种情况,1重新开始播放,2暂停以后继续播放,3点击进度条,播放点击位置的音乐,提示一点:无论哪种方式播放歌曲,只能发生一种播放歌曲的方式,不然就会出现几种歌曲一起出现,我们只需要在每种播放歌曲的方式都发送广播同一个广播消息(当前为:开始播放),这样,我们通过判断当前广播消息是否是在播放音乐了。。现在我将1、2两种播放形式放在一个程序块中,3为独立一块,如图,这是两个程序块的框架(还没添加播放功能),先看第一个,先加一个判断广播消息内容,确认没在播放歌曲(有点话,当前程序块就不运行),然后通过判断进度变量是否为0,来确定是重新播放,还是继续播放。最后我们看第二个程序块,点击精灵触发,然后歌曲进度就会变成鼠标点击的位置进度。

7第七步:了解好了两个程序块框架以后,我们就要往里面添加程序块,实现功能,如图一所示,方框内容就是我们需要加到第一个程序块里面去,首先通过歌曲名来播放,只需要将数目库里面的指定歌曲名放入程序块就可以把播放了,然后判断进度是否为0,来确定是哪种播放方式。播放的同时,我们需要更改进度、剩余时间变量的值。第三种播放方式的设置和第二种差不多,都是继续播放,只是第三种方式是获取点击时,鼠标x轴的位置,然后通过转化,更改进度,最后播放,还有一个不同点,新建了歌曲时长变量。用于显示在舞台。

8第八步:制作停止、暂停播放功能,如图所示,都是通过按键完成,先制作停止功能,先添加停止声音程序块,然后将进度变量设置为0,然后发送广播,此时按空格播放,就会是重新播放了。然后就是暂停功能,只需要设置暂停播放,然后发送广播,不需要设置进度,这样按空格播放时,不会重新播放

9第九步:最后一个功能,通过点击按钮播放上一首或者下一首功能,如图一,先加入停止播放所有声音,然后设置进度变量的值为0,判断能否切歌,不能就出现提示框,能的话就更改变量当前歌曲,如图二,另一个按钮的功能也差不多,只是判断条件、更改变量、提示框内容不同。

10第十步:我们试一下部分功能,如图一,我们先按“1”键,然后输入歌曲全称,然后点击确定,然后就可以点击“空格开始播放。如图二,此时变量也发生了变化,图三是我多搜索了一点歌,然后我点击切割按钮,再按了空格,此时看舞台,数据又发生了变化。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200624A0659H00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券