/************************************************** * MKOnlinePlayer v2.4 * 封装函数及UI交互模块 * 编写:mengkun(https://mkblog.cn) * 时间:2018-3-11 *************************************************/ // 判断是否是移动设备 var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i) ? true : false; }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i) ? true : false; }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; }, Windows: function() { return navigator.userAgent.match(/IEMobile/i) ? true : false; }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); } }; $(function(){ if(mkPlayer.debug) { console.warn('播放器调试模式已开启,正常使用时请在 js/player.js 中按说明关闭调试模式'); } rem.isMobile = isMobile.any(); // 判断是否是移动设备 rem.webTitle = document.title; // 记录页面原本的标题 rem.errCount = 0; // 连续播放失败的歌曲数归零 initProgress(); // 初始化音量条、进度条(进度条初始化要在 Audio 前,别问我为什么……) initAudio(); // 初始化 audio 标签,事件绑定 if(rem.isMobile) { // 加了滚动条插件和没加滚动条插件所操作的对象是不一样的 rem.sheetList = $("#sheet"); rem.mainList = $("#main-list"); } else { // 滚动条初始化(只在非移动端启用滚动条控件) $("#main-list,#sheet").mCustomScrollbar({ theme:"minimal", advanced:{ updateOnContentResize: true // 数据更新后自动刷新滚动条 } }); rem.sheetList = $("#sheet .mCSB_container"); rem.mainList = $("#main-list .mCSB_container"); } addListhead(); // 列表头 addListbar("loading"); // 列表加载中 // 顶部按钮点击处理 $(".btn").click(function(){ switch($(this).data("action")) { case "player": // 播放器 dataBox("player"); break; case "search": // 搜索 searchBox(); break; case "playing": // 正在播放 loadList(1); // 显示正在播放列表 break; case "sheet": // 播放列表 dataBox("sheet"); // 在主界面显示出音乐专辑 break; } }); // 列表项双击播放 $(".music-list").on("dblclick",".list-item", function() { var num = parseInt($(this).data("no")); if(isNaN(num)) return false; listClick(num); }); // 移动端列表项单击播放 $(".music-list").on("click",".list-item", function() { if(rem.isMobile) { var num = parseInt($(this).data("no")); if(isNaN(num)) return false; listClick(num); } }); // 小屏幕点击右侧小点查看歌曲详细信息 $(".music-list").on("click",".list-mobile-menu", function() { var num = parseInt($(this).parent().data("no")); musicInfo(rem.dislist, num); return false; }); // 列表鼠标移过显示对应的操作按钮 $(".music-list").on("mousemove",".list-item", function() { var num = parseInt($(this).data("no")); if(isNaN(num)) return false; // 还没有追加菜单则加上菜单 if(!$(this).data("loadmenu")) { var target = $(this).find(".music-name"); var html = '' + target.html() + '' + '
'; target.html(html); $(this).data("loadmenu", true); } }); // 列表中的菜单点击 $(".music-list").on("click",".icon-play,.icon-download,.icon-share", function() { var num = parseInt($(this).parent().data("no")); if(isNaN(num)) return false; switch($(this).data("function")) { case "play": // 播放 listClick(num); // 调用列表点击处理函数 break; case "download": // 下载 ajaxUrl(musicList[rem.dislist].item[num], download); break; case "share": // 分享 // ajax 请求数据 ajaxUrl(musicList[rem.dislist].item[num], ajaxShare); break; } return true; }); // 点击加载更多 $(".music-list").on("click",".list-loadmore", function() { $(".list-loadmore").removeClass('list-loadmore'); $(".list-loadmore").html('加载中...'); ajaxSearch(); }); // 点击专辑显示专辑歌曲 $("#sheet").on("click",".sheet-cover,.sheet-name", function() { var num = parseInt($(this).parent().data("no")); // 是用户列表,但是还没有加载数据 if(musicList[num].item.length === 0 && musicList[num].creatorID) { layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); // 0代表加载的风格,支持0-2 // ajax加载数据 ajaxPlayList(musicList[num].id, num, loadList); return true; } loadList(num); }); // 点击同步云音乐 $("#sheet").on("click",".login-in", function() { layer.prompt( { title: '请输入您的网易云 UID', closeBtn: false, // value: '', // 默认值 btn: [' 确定', ' 取消', ' 帮助'], btn3: function(index, layero){ layer.open({ title: '如何获取您的网易云UID?' ,closeBtn: false ,btn: [' 知道啦'] ,area: '280px;' ,shade: 0.6 //遮罩透明度 ,anim: -1 //0-6的动画形式,-1不开启 ,content: '1、首先点我(http://music.163.com/)打开网易云音乐官网' + music.artist + ' - ' + music.name + ' 的外链地址为:
' + '' + ' '; layer.open({ title: '歌曲外链分享' ,closeBtn: false ,btn: [' 关闭'] ,content: tmpHtml }); } // 改变右侧封面图像 // 新的图像地址 function changeCover(music) { var img = music.pic; // 获取歌曲封面 var animate = false,imgload = false; if(!img) { // 封面为空 ajaxPic(music, changeCover); // 获取歌曲封面图 img == "err"; // 暂时用无图像占个位... } if(img == "err") { img = "images/txtp.gif"; } else { if(mkPlayer.mcoverbg === true && rem.isMobile) // 移动端封面 { $("#music-cover").load(function(){ $("#mobile-blur").css('background-image', 'url("' + img + '")'); }); } else if(mkPlayer.coverbg === true && !rem.isMobile) // PC端封面 { $("#music-cover").load(function(){ if(animate) { // 渐变动画也已完成 $("#blur-img").backgroundBlur(img); // 替换图像并淡出 $("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效 } else { imgload = true; // 告诉下面的函数,图片已准备好 } }); // 渐变动画 $("#blur-img").animate({opacity: "0.2"}, 1000, function(){ if(imgload) { // 如果图片已经加载好了 $("#blur-img").backgroundBlur(img); // 替换图像并淡出 $("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效 } else { animate = true; // 等待图像加载完 } }); } } $("#music-cover").attr("src", img); // 改变右侧封面 $(".sheet-item[data-no='1'] .sheet-cover").attr('src', img); // 改变正在播放列表的图像 } // 向列表中载入某个播放列表 function loadList(list) { if(musicList[list].isloading === true) { layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); return true; } rem.dislist = list; // 记录当前显示的列表 dataBox("list"); // 在主界面显示出播放列表 // 调试信息输出 if(mkPlayer.debug) { if(musicList[list].id) { console.log('加载播放列表 ' + list + ' - ' + musicList[list].name + '\n' + 'id: ' + musicList[list].id + ',\n' + 'name: "' + musicList[list].name + '",\n' + 'cover: "' + musicList[list].cover + '",\n' + 'item: []'); } else { console.log('加载播放列表 ' + list + ' - ' + musicList[list].name); } } rem.mainList.html(''); // 清空列表中原有的元素 addListhead(); // 向列表中加入列表头 if(musicList[list].item.length == 0) { addListbar("nodata"); // 列表中没有数据 } else { // 逐项添加数据 for(var i=0; i' +name+ '
' + ''; rem.sheetList.append(html); } // 清空歌单显示 function clearSheet() { rem.sheetList.html(''); } // 歌单列表底部登陆条 function sheetBar() { var barHtml; if(playerReaddata('uid')) { barHtml = '已同步 ' + rem.uname + ' 的歌单 [刷新] [退出]'; } else { barHtml = '我的歌单 [点击同步]'; } barHtml = '' + ''; rem.sheetList.append(barHtml); } // 选择要显示哪个数据区 // 参数:要显示的数据区(list、sheet、player) function dataBox(choose) { $('.btn-box .active').removeClass('active'); switch(choose) { case "list": // 显示播放列表 if($(".btn[data-action='player']").css('display') !== 'none') { $("#player").hide(); } else if ($("#player").css('display') == 'none') { $("#player").fadeIn(); } $("#main-list").fadeIn(); $("#sheet").fadeOut(); if(rem.dislist == 1 || rem.dislist == rem.playlist) { // 正在播放 $(".btn[data-action='playing']").addClass('active'); } else if(rem.dislist == 0) { // 搜索 $(".btn[data-action='search']").addClass('active'); } break; case "sheet": // 显示专辑 if($(".btn[data-action='player']").css('display') !== 'none') { $("#player").hide(); } else if ($("#player").css('display') == 'none') { $("#player").fadeIn(); } $("#sheet").fadeIn(); $("#main-list").fadeOut(); $(".btn[data-action='sheet']").addClass('active'); break; case "player": // 显示播放器 $("#player").fadeIn(); $("#sheet").fadeOut(); $("#main-list").fadeOut(); $(".btn[data-action='player']").addClass('active'); break; } } // 将当前歌曲加入播放历史 // 参数:要添加的音乐 function addHis(music) { if(rem.playlist == 2) return true; // 在播放“播放记录”列表则不作改变 if(musicList[2].item.length > 300) musicList[2].item.length = 299; // 限定播放历史最多是 300 首 if(music.id !== undefined && music.id !== '') { // 检查历史数据中是否有这首歌,如果有则提至前面 for(var i=0; i