这一年都在准备考研,上岸后也是玩了很久,没怎么写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目前只实现了搜索音乐播放的功能,后续会进行搜索展示歌单,选择歌曲播放以及下载音乐的功能。