这一年都在准备考研,上岸后也是玩了很久,没怎么写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

autoxjs 导入java_javascript

 上图是界面,从上往下的控件依次是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);

autoxjs 导入java_autoxjs 导入java_02

  随后取得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));
        
    });
};

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

 看一下实现效果。

autoxjs 导入java_javascript_03

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