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

这一年都在准备考研，上岸后也是玩了很久，没怎么写auto.js了，这次受魔音音乐app的启发，想去制作一款能够播放和下载全网音乐的app。好多细节都忘了，手生写了好久，以下是制作方法。后续会逐渐完善功能并写出教程。代码及app下载在我的公众号For My Future。

一.收集音乐api

既然要制作一款能够免费下载全网音乐的app，那么找到一个可用的api是首要前提。因为有魔音的参考，所以抓包了魔音，发现它使用的api都是酷我的音乐，于是上网寻找，找到了合适的api，介绍如下：

歌曲搜索API：

{0}=需要搜索的歌曲或歌手

{1}=查询的页码数

{2}=当前页的返回数量

例子：http://search.kuwo.cn/r.s?all=周杰伦&ft=music& itemset=web_2013&client=kt&pn=0&rn=5&rformat=json&encoding=utf8

之后会返回json格式的歌曲id，封面id等等。

歌曲播放API：http://antiserver.kuwo.cn/anti.s?type=convert_url&rid={0}&format=aac|mp3&response=url

{0}=上面获取到的歌曲ID

例子：http://antiserver.kuwo.cn/anti.s?type=convert_url&rid=MUSIC_324244&format=aac|mp3&response=url

上图是界面，从上往下的控件依次是input，button，img，progress，三个img图标。


<frame><vertical><horizontal gravity="center"><input id="musicname"   hint="请输入歌曲名称" marginTop="20"></input><button id="search" style="Widget.AppCompat.Button.Colored" text="搜索"marginTop="20"  gravity="center"/></horizontal><img marginTop="50" id="album" layout_gravity="center" src="@drawable/ic_music_note_black_48dp" w="350" h="350"  /><seekbar progress="0" id="p"paddingLeft="20" paddingRight="20" marginTop="10"/><horizontal gravity="center" layout_gravity="center" marginTop="10"><frame marginRight="30"><img  w="40" h="40" circle="true" gravity="center" layout_gravity="center"/><img id="stop" src="@drawable/ic_stop_black_48dp" gravity="center" w="40" h="40"  layout_gravity="center"/></frame><frame><img  w="50" h="50" circle="true" gravity="center" layout_gravity="center"/><img id="pause" src="@drawable/ic_play_arrow_black_48dp" layout_gravity="center" w="50" h="50" /></frame><frame marginLeft="30"><img  w="40" h="40" circle="true" layout_gravity="center"/><img id="ahead" src="@drawable/ic_fast_forward_black_48dp" layout_gravity="center" w="40" h="40" /></frame></horizontal></vertical></frame>

三.功能实现

首先实现的是搜索的功能，当在编辑框输入文本后，点击搜索按钮，变量songname会被赋值。

let songname = ui.musicname.getText();

然后利用http.get()的方法得到musicrid。

let res =http.get("http://search.kuwo.cn/r.s?all="+songname+"&ft=music& itemset=web_2013&client=kt&pn=0&rn=1&rformat=json&encoding=utf8")

得到响应后用json解析时会发现一直报错，原来它返回的json格式中数据都是单引号的，我们需要把单引号替换成双引号后再去进行解析。


let res =http.get("http://search.kuwo.cn/r.s?all="+songname+"&ft=music& itemset=web_2013&client=kt&pn=0&rn=1&rformat=json&encoding=utf8")
let html=res.body.string().replace(/'/g,'"');
let json=JSON.parse(html);

随后取得musicrid获得音乐直链songurl以及albumurl封面链接。

let musicrid = json.abslist[0].MUSICRID;albumurl = json.abslist[0].hts_MVPIC;
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()

这里直接设置封面图片，并播放音乐。


ui.run(()=>{if(albumurl!=null){ui.album.setSource(albumurl);}})PlayMusic();

其次，实现音乐播放的功能，这里利用的是Java中的MediaPlayer类，具体介绍（http://t.zoukankan.com/0927wyj-p-5429892.html）。申请一个MediaPlayer的实例作为全局变量便于控制。

var mp = new android.media.MediaPlayer;

PlayMusic()函数写法如下：


function PlayMusic() {mp.reset(); //将mp对象重置到刚创建的状态mp.setDataSource(musicurl); mp.prepare(); //播放 准备完成，开始播放前要调用mp.start();Duration = mp.getDuration();ui.run(() => {ui.pause.setSource("@drawable/ic_pause_black_48dp") //   ui.music_name.setText(String(name));});
};

还有一个比较难的点是进度条的设置，这里上网搜寻资料直接进行复制粘贴了，如下：

看一下实现效果。

最后做个总结，这个app目前只实现了搜索音乐播放的功能，后续会进行搜索展示歌单，选择歌曲播放以及下载音乐的功能。

代码及app下载以及更多内容在我的微信公众号For My Future，欢迎关注。

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

auto.js制作简易音乐app（二）
上一个版本只完成了音乐播放的功能,此次编写实现了歌单搜索,歌曲选择以及歌曲下载的功能,一些基本功能已经大体完成了,后续也只是一些BUG处理,脚本逻辑完善等等.app及代码下载在我的公众号:For My ...
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 Pro 调起APP并跳转至指定页面
本文仅供学习交流使用,如侵立删效果: 环境: VS Code Auto.js Pro 7.0.4 雷电4 模拟器跳转 function openjd() {app.startAcvity({pac ...
Auto.js加密解密|快照Snapshot解密|Dex转js|Auto.js庖丁下载|解除APP限制
Auto.js Pro升级到Ver3.1.0 |整合灵虫功能增加一种加密方式 Ver3.1.0 更新日志 ☆☆ 解密增强 ☆☆ 增加一种解密方式:兼容方式. 兼容方式:支持Auto.js Pro8. ...
利用JS制作简易计算器
目的:利用JS制作一个简易的计算器,能够实现简单四则运算要求:三个输入框输入值只能是数字,当输入非数字时提示并清空输入框,利用正则表达式:点击按钮实现计算. 话不多说,贴图为上: 看了效果图,下面就 ...
用Vue制作简易音乐播放器（超详细）
先放个效果图吧首先先把主体结构搭好,样式调好,然后再来写播放器的功能. 根据播放器的形状,将其分为头部(搜索栏),中间(歌曲列表,碟片,热评),尾部(播放器栏),html结构如下 <div c ...

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

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

最新文章

热门文章