/************************************************** * 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', // value: '', // 默认值 btn: ['确定', '取消', '帮助'], btn3: function(index, layero){ layer.open({ title: '如何获取您的网易云UID?' ,shade: 0.6 //遮罩透明度 ,anim: 0 //0-6的动画形式,-1不开启 ,content: '1、首先点我(http://music.163.com/)打开网易云音乐官网
' + '2、然后点击页面右上角的“登录”,登录您的账号
' + '3、点击您的头像,进入个人中心
' + '4、此时浏览器地址栏 /user/home?id= 后面的数字就是您的网易云 UID' }); } }, 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; } musicInfo(rem.playlist, rem.playid); }); // 播放、暂停按钮的处理 $(".btn-play").click(function(){ pause(); }); // 循环顺序的处理 $(".btn-order").click(function(){ orderChange(); }); // 上一首歌 $(".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: (rem.isMobile? 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[0] !== undefined) rem.audio[0].volume = oldVol; // 应用音量 }); if((mkPlayer.coverbg === true && !rem.isMobile) || (mkPlayer.mcoverbg === true && rem.isMobile)) { // 开启了封面背景 if(rem.isMobile) { // 移动端采用另一种模糊方案 $('#blur-img').html('
'); } else { // 背景图片初始化 $('#blur-img').backgroundBlur({ // imageURL : '', // URL to the image that will be used for blurring blurAmount : 50, // 模糊度 imageClass : 'blured-img', // 背景区应用样式 overlayClass : 'blur-mask', // 覆盖背景区class,可用于遮罩或额外的效果 // duration: 0, // 图片淡出时间 endOpacity : 1 // 图像最终的不透明度 }); } $('.blur-mask').fadeIn(1000); // 遮罩层淡出 } // 图片加载失败处理 $('img').error(function(){ $(this).attr('src', 'images/player_cover.png'); }); // 初始化播放列表 initList(); }); // 展现系统列表中任意首歌的歌曲信息 function musicInfo(list, index) { var music = musicList[list].item[index]; var tempStr = '歌名:' + music.name + '
歌手:' + music.artist + '
专辑:' + music.album; if(list == rem.playlist && index == rem.playid) { // 当前正在播放这首歌,那么还可以顺便获取一下时长。。 tempStr += '
时长:' + formatTime(rem.audio[0].duration); } tempStr += '
操作:' + '下载' + '外链'; layer.open({ type: 0, shade: false, title: false, //不显示标题 btn: false, content: tempStr }); if(mkPlayer.debug) { console.info('id: "' + music.id + '",\n' + 'name: "' + music.name + '",\n' + 'artist: "' + music.artist + '",\n' + 'album: "' + music.album + '",\n' + 'source: "' + music.source + '",\n' + 'url_id: "' + music.url_id + '",\n' + 'pic_id: "' + music.pic_id + '",\n' + 'lyric_id: "' + music.lyric_id + '",\n' + 'pic: "' + music.pic + '",\n' + 'url: ""'); // 'url: "' + music.url + '"'); } } // 展现搜索弹窗 function searchBox() { var tmpHtml = '
' + '
' + ' ' + ' ' + '
' + '
' + ' ' + ' ' + ' ' + ' ' + ' ' + '
' + '
'; layer.open({ type: 1, shade: false, title: false, // 不显示标题 shade: 0.5, // 遮罩颜色深度 shadeClose: true, content: tmpHtml, cancel: function(){ } }); // 恢复上一次的输入 $("#search-wd").focus().val(rem.wd); $("#music-source input[name='source'][value='" + rem.source + "']").prop("checked", "checked"); } // 搜索提交 function searchSubmit() { var wd = $("#search-wd").val(); if(!wd) { layer.msg('搜索内容不能为空', {anim:6, offset: 't'}); $("#search-wd").focus(); return false; } rem.source = $("#music-source input[name='source']:checked").val(); layer.closeAll('page'); // 关闭搜索框 rem.loadPage = 1; // 已加载页数复位 rem.wd = wd; // 搜索词 ajaxSearch(); // 加载搜索结果 return false; } // 下载正在播放的这首歌 function thisDownload(obj) { ajaxUrl(musicList[$(obj).data("list")].item[$(obj).data("index")], download); } // 分享正在播放的这首歌 function thisShare(obj) { ajaxUrl(musicList[$(obj).data("list")].item[$(obj).data("index")], ajaxShare); } // 下载歌曲 // 参数:包含歌曲信息的数组 function download(music) { if(music.url == 'err' || music.url == "" || music.url == null) { layer.msg('这首歌不支持下载'); return; } openDownloadDialog(music.url, music.name + ' - ' + music.artist); } /** * 通用的打开下载对话框方法,没有测试过具体兼容性 * @param url 下载地址,也可以是一个blob对象,必选 * @param saveName 保存文件名,可选 * http://www.cnblogs.com/liuxianan/p/js-download.html */ function openDownloadDialog(url, saveName) { if(typeof url == 'object' && url instanceof Blob) { url = URL.createObjectURL(url); // 创建blob地址 } var aLink = document.createElement('a'); aLink.href = url; aLink.target = "_blank"; aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效 var event; if(window.MouseEvent) event = new MouseEvent('click'); else { event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } aLink.dispatchEvent(event); } // 获取外链的ajax回调函数 // 参数:包含音乐信息的数组 function ajaxShare(music) { if(music.url == 'err' || music.url == "" || music.url == null) { layer.msg('这首歌不支持外链获取'); return; } var tmpHtml = '

' + music.artist + ' - ' + music.name + ' 的外链地址为:

' + '' + '

* 获取到的音乐外链有效期较短,请按需使用。

'; layer.open({ title: '歌曲外链分享' ,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/player_cover.png"; } 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' + ' 专辑' + ' ' + ' ' + ' 歌手' + ' ' + ' ' + ' 歌曲' + ' ' + ''; 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); } // 将时间格式化为 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.id) 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 || 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; 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