H5音樂播放器【歌單列表】

上篇詳細描述了播放頁歌詞如何實現跟隨跟單滾動，如何解析歌詞，那麼歌單頁又是如何生成的呢，話不多說，直接上圖上代碼！

首先需要獲取數據，具體獲取數據api請轉到我跟我大兄弟博客去觀看學習去，同時也感謝我大兄弟無私跟我們共用介面！

www.bzqll.com  我大兄弟博客！

歌單列表生成

首先需要獲取數據，然後生成列表！話不多說，直接上代碼！

/* 預設首頁是音樂音樂熱歌榜，處理返回的json數據用了一點es6的語法 */
function indexSong() {

var count = 1;
loading("載入中...", 500);//懸浮彈框
$.ajax({
url: 'https:/xxxxxxxxxxxxx',
type: 'GET',
data: {
"key": "xxxxxxxx",
"id": "3778678",
"limit": "200",
"offset": "0"
},//具體url  跟key請訪問我大兄弟博客獲取，我的vip路徑地址跟key沒辦法共用，請諒解
success: function(data) {
var NECsongs = data.data.songs; //是個數組對象，存放多個json數據
var length = NECsongs.length;
var html = `<div class="listitems list-head">
<span class="music-album">時長</span>
<span class="auth-name">歌手</span>
<span class="music-name">歌曲</span>
</div>`;
for(var vals of NECsongs) {　　//迴圈獲取歌單，歌單歌詞鏈接，歌單信息等
var ctime = krAudio.format(vals.time);
html += `<div class="list-item" data-url="${vals.url}" data-pic="${vals.pic}" data-lrc="${vals.lrc}">
<span class="list-num">${count}</span>
<span class="list-mobile-menu"></span>
<span class="music-album">${ctime}</span>
<span class="auth-name">${vals.singer}</span>
<span class="music-name">${vals.name}</span>
</div>`;
count++;
}
if(localStorage.getItem("songsList") != null && localStorage.getItem("songsList") != "") {
html += localStorage.getItem("songsList");
}

listNow = html;//全局變數獲取數據，存到本地
html += `<div class="list-item text-center" title="全部載入完了哦~" id="list-foot">全部載入完了哦~</div>`;
//添加到列表中
mainList.html(html);//添加到播放列表
// 播放列表滾動到頂部
listToTop();
tzUtil.animates($("#tzloading"), "slideUp"); //載入動畫消失
//刷新播放列表的總數
krAudio.allItem = mainList.children('.list-item').length - 1; //減去最後一個提示框
//更新列表小菜單
appendlistMenu();
//移動端列表點擊播放
mainList.find(".list-item").click(mobileClickPlayMainList);
//移動端列表右邊信息按鈕的點擊
$(".list-mobile-menu").click(mobileListMenu);
}
});
fineListBox();

};

列表點擊播放

function mobileClickPlayMainList() {

　　if(isMobile) {

playlist = "mainLists";
search = false; //搜索標誌結束
krAudio.Currentplay = $(this).index() -1; //當前播放的音樂序號
krAudio.seturl();
krAudio.play();
}

}