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(二)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: TED演讲的字幕下载
- 下一篇: Windows环境下搭建Redis集群