/************************************************** * MKOnlinePlayer v2.2 * 封装函数及UI交互模块 * 编写:mengkun(http://mkblog.cn) * 时间:2017-3-26 *************************************************/ // 判断是否是移动设备 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 中按说明关闭调试模式'); } if(!isMobile.any()) { // 只在非移动设备使用滚动条插件 // 滚动条初始化 $("#main-list,#sheet").mCustomScrollbar({ theme:"minimal", advanced:{ updateOnContentResize: true // 数据更新后自动刷新滚动条 } }); // 加了滚动条插件和没加滚动条插件所操作的对象是不一样的 rem.sheetList = $("#sheet .mCSB_container"); rem.mainList = $("#main-list .mCSB_container"); } else { rem.sheetList = $("#sheet"); rem.mainList = $("#main-list"); } addListhead(); // 列表头 addListbar("loading"); // 列表加载中 // 顶部按钮点击处理 $(".btn").click(function(){ switch($(this).data("action")) { case "player": // 播放器 dataBox("player"); break; case "search": // 搜索 $("#btn-area").hide(); $("#search-area").fadeIn(); $("#search-wd").val(mkPlayer.wd); $("#search-wd").focus(); $("#search-wd").select(); break; case "playing": // 正在播放 loadList(1); // 显示正在播放列表 break; case "sheet": // 播放列表 dataBox("sheet"); // 在主界面显示出音乐专辑 break; } }); // 搜索框回车搜索 $("#search-wd").keydown(function(event){ if(event.keyCode==13){ $(".search-submit").click(); } }); // 搜索 $(".search-submit").click(function(){ var wd = $("#search-wd").val(); if(!wd) { layer.msg('搜索内容不能为空', {anim:6}); return false; } search(wd); }); // 关闭搜索框 $(".search-close").click(function(){ $("#btn-area").fadeIn(); $("#search-area").hide(); }); // 列表项双击播放 $(".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(isMobile.any()) { var num = parseInt($(this).data("no")); if(isNaN(num)) return false; listClick(num); } }); // 列表鼠标移过显示对应的操作按钮 $(".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) { // ajax加载数据 ajaxPlayList(musicList[num].id, num, loadList); return true; } loadList(num); }); // 点击同步云音乐 $("#sheet").on("click",".login-in", function() { layer.prompt( { title: '请输入您的网易云 ID', // value: '', // 默认值 btn: ['确定', '取消', '帮助'], btn3: function(index, layero){ layer.open({ title: '如何获取您的网易云ID?' ,shade: 0.6 //遮罩透明度 ,anim: 0 //0-6的动画形式,-1不开启 ,content: '1、首先点我(http://music.163.com/)打开网易云音乐官网
' + '2、然后点击页面右上角的“登录”,登录您的账号
' + '3、点击您的头像,进入个人中心
' + '4、此时浏览器地址栏/user/home?id=后面的数字就是您的网易云 ID' }); } }, function(val, index){ // 输入后的回调函数 if(isNaN(val)) { layer.msg('uid 只能是数字',{anim: 6}); return false; } layer.close(index); // 关闭输入框 ajaxUserList(val); }); }); // 刷新用户列表 $("#sheet").on("click",".login-refresh", function() { playerSavedata('ulist', ''); layer.msg('刷新歌单'); clearUserlist(); }); // 退出登录 $("#sheet").on("click",".login-out", function() { playerSavedata('uid', ''); playerSavedata('ulist', ''); layer.msg('已退出'); clearUserlist(); }); // 播放、暂停按钮的处理 $("#music-info").click(function(){ if(rem.playid === undefined) { layer.msg('请先播放歌曲'); return false; } var tmpMusic = musicList[1].item[rem.playid]; var tempStr = "歌名:" + tmpMusic.musicName + "
歌手:" + tmpMusic.artistsName + "
专辑:" + tmpMusic.albumName + "
时长:" + formatTime(rem.audio.duration) + "
操作:下载外链"; layer.open({ type: 0, shade: false, title: false, //不显示标题 btn: false, content: tempStr }); }); // 播放、暂停按钮的处理 $(".btn-play").click(function(){ pause(); }); // 上一首歌 $(".btn-prev").click(function(){ prevMusic(); }); // 下一首 $(".btn-next").click(function(){ nextMusic(); }); // 静音按钮点击事件 $(".btn-quiet").click(function(){ var oldVol; // 之前的音量值 if($(this).is('.btn-state-quiet')) { oldVol = $(this).data("volume"); oldVol = oldVol? oldVol: (isMobile.any()? 1: mkPlayer.volume); // 没找到记录的音量,则重置为默认音量 $(this).removeClass("btn-state-quiet"); // 取消静音 } else { oldVol = volume_bar.percent; $(this).addClass("btn-state-quiet"); // 开启静音 $(this).data("volume", oldVol); // 记录当前音量值 oldVol = 0; } playerSavedata('volume', oldVol); // 存储音量信息 volume_bar.goto(oldVol); // 刷新音量显示 if(rem.audio !== undefined) rem.audio.volume = oldVol; // 应用音量 }); if(mkPlayer.coverbg === true) { // 开启了封面背景 // 背景图片初始化 $('#blur-img').backgroundBlur({ // imageURL : '', // URL to the image that will be used for blurring blurAmount : 50, // 模糊度 imageClass : 'blured-img', // 背景区应用样式 overlayClass : 'blur-mask', // 覆盖背景区class,可用于遮罩或额外的效果 // duration: 1000, // 图片淡出时间 endOpacity : 1 // 图像最终的不透明度 }); $('.blur-mask').fadeIn(1000); // 遮罩层淡出 } // 图片加载失败处理 $('img').error(function(){ $(this).attr('src', 'images/player_cover.png'); }); // 初始化播放列表 initList(); }); // 下载正在播放的这首歌 function thisDownload() { download(musicList[1].item[rem.playid]); } // 分享正在播放的这首歌 function thisShare() { ajaxShare(musicList[1].item[rem.playid]); } // 下载歌曲 // 参数:包含歌曲信息的数组 function download(music) { var tmpUrl = mkPlayer.api + "?types=download&url=" + music.mp3Url + "&name=" + urlEncode(music.musicName) + "%20-%20" + urlEncode(music.artistsName); window.open(tmpUrl); } // 获取外链的ajax回调函数 // 参数:包含音乐信息的数组 function ajaxShare(music) { layer.open({ title: '歌曲分享' ,content: music.artistsName + ' - ' + music.musicName + ' 的外链地址为:
' }); } // 改变右侧封面图像 // 新的图像地址 function changeCover(img) { if(!img) img = "images/player_cover.png"; var animate = false,imgload = false; img += "?param=186x186"; // 限制封面图为 186*186px $("#music-cover").attr("src", img); // 改变右侧封面 $(".sheet-item[data-no='1'] .sheet-cover").attr('src', img); // 改变正在播放列表的图像 if(mkPlayer.coverbg === true) { // 开启了封面背景 $("#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; // 等待图像加载完 } }); } } // 搜索功能 // 要搜索的字符 function search(str) { rem.loadPage = 1; // 已加载页数复位 rem.wd = str; ajaxSearch(); } // 向列表中载入某个播放列表 function loadList(list) { if(musicList[list].isloading === true) { layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); return true; } 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.dislist = list; // 记录当前显示的列表 rem.mainList.html(''); // 清空列表中原有的元素 addListhead(); // 向列表中加入列表头 // 逐项添加数据 for(var i=0; i' + ' 专辑' + ' ' + ' ' + ' 演唱者' + ' ' + ' ' + ' 歌曲' + ' ' + ''; rem.mainList.append(html); } // 列表中新增一项 // 参数:编号、名字、歌手、专辑 function addItem(no, name, auth, album) { var html = '
' + ' ' + no + '' + ' ' + album + '' + ' ' + auth + '' + ' ' + name + '' + '
'; rem.mainList.append(html); } // 加载列表中的提示条 // 参数:类型(more、nomore、loading、nodata、clear) function addListbar(types) { var html switch(types) { case "more": // 还可以加载更多 html = '
点击加载更多...
'; break; case "nomore": // 数据加载完了 html = '
全都加载完了
'; break; case "loading": // 加载中 html = '
播放列表加载中...
'; break; case "nodata": // 列表中没有内容 html = '
可能是个假列表,什么也没有
'; break; case "clear": // 清空列表 html = '
清空列表
'; break; } rem.mainList.append(html); } // 音乐链接中特殊url处理 // 参数:原始url function urlHandle(url) { return url.replace("http:\/\/m", "http://p"); } // 将时间格式化为 00:00 的格式 // 参数:原始时间 function formatTime(time){ var hour,minute,second; hour = String(parseInt(time/3600,10)); if(hour.length == 1) hour='0' + hour; minute=String(parseInt((time%3600)/60,10)); if(minute.length == 1) minute='0'+minute; second=String(parseInt(time%60,10)); if(second.length == 1) second='0'+second; if(hour > 0) { return hour + ":" + minute + ":" + second; } else { return minute + ":" + second; } } // url编码 // 输入参数:待编码的字符串 function urlEncode(String) { return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22"); } // 在 ajax 获取了音乐的信息后再进行更新 // 参数:要进行更新的音乐 function updateMinfo(music) { // 不含有 id 的歌曲无法更新 if(!music.musicId) return false; // 循环查找播放列表并更新信息 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 = '
' + '
' + 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) { // 正在播放 $(".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.musicId !== undefined && music.musicId !== '') { // 检查历史数据中是否有这首歌,如果有则提至前面 for(var i=0; i2 && musicList[i].item.length == 0))) { musicList[i].item = []; if(musicList[i].id) { // 列表ID已定义 // ajax获取列表信息 ajaxPlayList(musicList[i].id, i); } else { // 列表 ID 未定义 if(!musicList[i].name) musicList[i].name = '未命名'; } } // 在前端显示出来 addSheet(i, musicList[i].name, musicList[i].cover); } // 登陆了,但歌单又没有,说明是在刷新歌单 if(playerReaddata('uid') && !tmp_ulist) { ajaxUserList(rem.uid); return true; } // 首页显示默认列表 if(mkPlayer.defaultlist >= musicList.length) mkPlayer.defaultlist = 1; // 超出范围,显示正在播放列表 if(musicList[mkPlayer.defaultlist].isloading !== true) loadList(mkPlayer.defaultlist); // 显示最后一项登陆条 sheetBar(); } // 清空用户的同步列表 function clearUserlist() { if(!rem.uid) return false; // 查找用户歌单起点 for(var i=1; i