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();
}

}