auto.js制作简易音乐app（二）

上一个版本只完成了音乐播放的功能，此次编写实现了歌单搜索，歌曲选择以及歌曲下载的功能，一些基本功能已经大体完成了，后续也只是一些BUG处理，脚本逻辑完善等等。app及代码下载在我的公众号：For My Future。


ui.layout(<vertical><SearchView id="search" w="*" h="50" marginTop="15"/><ListView id="list" bg="#B0E0E6"/><ListView id="namelist" w="*" h="*"/></vertical>
);

上方搜索框是searchview控件，下方是两个listview。

searchview比input使用起来更麻烦一点，选择它是因为手机用键盘输入时会出现搜索的按钮，如下图红圈标识。第一个listview的功能是根据输入自动推荐相关歌曲名称，类似我们百度输入某些文字后输入框下面出现的一些推荐词条，如下图蓝框。第二个listview就是点击搜索按钮后相关歌曲信息的展示了。

1.1搜索框功能编写

搜索框样式设置：


ui.search.setIconified( false );
ui.search.setSubmitButtonEnabled(true);
ui.search.setQueryHint( "请输入音乐..." );//搜索的hint

在功能编写之前，首先要声明一个storage，存储获得的音乐rid以及相关信息，方便脚本之间数据的传递。


var storage = storages.create("1216951671");

搜索框事件监听，具体详解见代码注释。

ui.search.setOnQueryTextListener( {onQueryTextChange ( text ) { //监听搜索框内容改变来推荐词条if ( text.length > 0 ) {ui.list.setVisibility( 0 );// ui.list.setFilterText( text );//设置过滤器adapter.getFilter().filter( text );//过滤器与list绑定，具体介绍在后面} else {ui.list.setVisibility( 8 );//不可见ui.list.clearTextFilter();}return true;},onQueryTextSubmit(text){ //点击搜索按键后所触发的事件ui.list.setVisibility( 8 );if(text!=null){threads.start(function(){ //线程访问网络，搜索歌曲let res =http.get("http://search.kuwo.cn/r.s?all="+text+"&ft=music& itemset=web_2021&client=kt&pn=0&rn=30&rformat=json&encoding=utf8")let html=res.body.string().replace(/'/g,'"');//双引号替换单引号let json=JSON.parse(html);for(i=0;i<20;i++){//搜索20首歌，歌曲名字，时间，id，歌手分别放在对应的列表中songnamelists[i]=json.abslist[i].SONGNAME;durationlists[i]=formatSeconds(json.abslist[i].DURATION);//fomatsecond时间戳转化函数，下文会具体介绍musicridlists[i]=json.abslist[i].MUSICRID;artistlists[i]=json.abslist[i].ARTIST; totallists[i]= songnamelists[i].toString()+"\t"+"\t"+ artistlists[i].toString()+"\t"+"\t"+durationlists[i].toString();//相关信息汇总在一个列表中 }})let adapter2 = new ArrayAdapter(context, android.R.layout.simple_expandable_list_item_1, totallists)ui.namelist.setAdapter(adapter2);//listview控件要与adapter绑定ui.namelist.setOnItemClickListener({onItemClick( parent,  view, position,  id){//position为 点击歌曲时的位置media.stopMusic();//let s = adapter.getItem(position);musicrid = musicridlists[position];total = totallists[position];storage.put("musicrid", musicrid);//根据位置取列表中歌曲id及相关信息，storage可存储所选歌曲信息，并发送给音乐播放歌曲界面，实现两个脚本之间传递数据storage.put("total", total);log(storage.get("musicrid"));engines.execScriptFile("界面.js")//启动音乐播放器界面}})}// log(totallists);return true;}
} );

1.2推荐词条功能编写

首先adapter与一个list进行绑定，后续对列表数据的改动就是通过adapter进行操作的。


strArr = [ "许嵩", "如果当时", "庐州月", "昨夜书", "最伟大的作品", "超市" ,"周杰伦" ];//本地推荐的词条，当然也可以通过网上的词条api进行添加
let adapter = new ArrayAdapter( context, android.R.layout.simple_expandable_list_item_1, strArr );
ui.list.setAdapter( adapter );
ui.list.setTextFilterEnabled( true );//启动过滤v
ui.list.setVisibility( 8 );//一开始不显示ListViewui.list.setOnItemClickListener({//监听list点击onItemClick( parent,  view, position,  id){let s = adapter.getItem(position);ui.search.setQuery(s.toString(),true)}//点击时将词条内容设置到搜索框中
})

1.3时间戳转化

通过api得到的音乐时长是秒数，所以还要设计函数转化为分秒的格式。


function formatSeconds(value) {let secondTime = parseInt(value);// 秒let minuteTime = 0;// 分let hourTime = 0;// 小时if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数//获取分钟，除以60取整数，得到整数分钟minuteTime = parseInt(secondTime / 60);//获取秒数，秒数取余，得到整数秒数secondTime = parseInt(secondTime % 60);//如果分钟大于60，将分钟转换成小时if(minuteTime > 60) {//获取小时，获取分钟除以60，得到整数小时hourTime = parseInt(minuteTime / 60);//获取小时后取余的分，获取分钟除以60取余的分minuteTime = parseInt(minuteTime % 60);}}let result = "" + parseInt(secondTime) + "秒";if(minuteTime > 0) {result = "" + parseInt(minuteTime) + "分" + result;}if(hourTime > 0) {result = "" + parseInt(hourTime) + "小时" + result;}return result;
}

二.歌曲下载功能musicv2.js文件编写

这个文件就是上一个教程的，再做一些修改即可。播放功能在上一个教程讲解过，故不再赘述。下文详细介绍如何进行下载。

首先创建存储的文件夹，


var dirpath = "/sdcard/下载的音乐/";
files.ensureDir(dirpath);

在这个脚本用storage的功能得到search.js脚本传递过来的音乐的rid和相关信息。

var storage = storages.create("1216951671");
var musicrid = storage.get("musicrid");
var total = storage.get("total")

然后取音乐直链进行播放，


let songurl ="http://antiserver.kuwo.cn/anti.s?type=convert_url&rid="+musicrid+"&format=aac|mp3&response=url";let songurl1 = http.get(songurl);musicurl= songurl1.body.string()PlayMusic();

当点击下载按钮时，根据这个直链进行下载及保存。


ui.down.click(function(){threads.start(function(){let res = http.get(musicurl);files.writeBytes(dirpath+total+".mp3", res.body.bytes());toast("下载成功，打开手机自带音乐播放器即可聆听");media.scanFile(dirpath);//扫描，自动添加到媒体库})})

最后，在手机自带的音乐播放器即可找到下载的文件。

其实app还存在很多问题，比如说音乐重音问题，如果正在听音乐，这时返回重新搜索播放新歌曲，就会有二重音，所以在听音乐界面返回搜索音乐界面的时候一定要去点暂停或者停止按钮，这样才不会造成重音。能用但有缺陷，所以这版的音乐app起名为音乐BUG版。

视频演示地址：
https://b23.tv/CnGOyTU

app下载地址：

https://jianglaishi.lanzout.com/ipLGz08fy4qd
密码:c1bv

代码及更多教程在我的微信公众号For My Future上，欢迎关注！

auto.js制作简易音乐app（二）相关推荐

Auto.js制作短视频app（添加登陆注册界面）
在b站上看到了一个视频咨询的安卓项目 https://www.bilibili.com/video/BV16Z4y1H7jj?spm_id_from=333.337.search-card.all.c ...
Auto.js制作蓝奏软件库app
教程简介: 本教程利用抓包工具抓到蓝奏软件分享的接口,添加搜索功能,在ui界面的list控件中显示搜索结果,实现了list的上拉翻页,下拉刷新功能,并提供搜索结果的下载服务.(代码及软件下载地址在文末 ...
HTML制作年历,js制作简易年历完整实例
本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己 ...
原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
【带着canvas去流浪（12）】用Three.js制作简易的MARVEL片头动画（上） #华为云·寻找黑马程序员#
[摘要] 用three.js实现简易的漫威片头动画示例代码托管在:http://www.github.com/dashnowords/blogs 一. 大作业说明通读完上一篇博文中提及的教程,觉得 ...
Auto.js加密解密|快照Snapshot解密|Dex转js|Auto.js庖丁下载|解除APP限制
Auto.js Pro升级到Ver3.1.0 |整合灵虫功能增加一种加密方式 Ver3.1.0 更新日志 ☆☆ 解密增强 ☆☆ 增加一种解密方式:兼容方式. 兼容方式:支持Auto.js Pro8. ...
利用JS制作简易计算器
目的:利用JS制作一个简易的计算器,能够实现简单四则运算要求:三个输入框输入值只能是数字,当输入非数字时提示并清空输入框,利用正则表达式:点击按钮实现计算. 话不多说,贴图为上: 看了效果图,下面就 ...
Auto.js Pro 调起APP并跳转至指定页面
本文仅供学习交流使用,如侵立删效果: 环境: VS Code Auto.js Pro 7.0.4 雷电4 模拟器跳转 function openjd() {app.startAcvity({pac ...
Android——一个简单的音乐APP(二)
一个简单的音乐APP 效果视频前言音乐下载音乐下载效果图实习步骤&思想添加到下载队列单任务下载多任务下载音乐下载获取音乐下载源创建本地路径创建目录开始音乐下载下载进度 ...

auto.js制作简易音乐app（二）

auto.js制作简易音乐app（二）相关推荐

最新文章

热门文章