/************************************************** * MKOnlinePlayer v2.0 * 播放器主功能模块 * 编写:mengkun(http://mkblog.cn) * 时间:2017-3-16 *************************************************/ // 播放器功能配置 var mkPlayer = { api: "api.php", // api地址 wd: "陈奕迅", // 显示在搜索栏的搜索词 loadcount: 20, // 搜索结果一次加载多少条 defaultlist: 3, // 默认要显示的播放列表编号 autoplay: false, // 是否自动播放(true/false) *在手机端可能无法自动播放 volume: 0.6, // 默认音量值(0~1之间) debug: false // 是否开启调试模式(true/false) }; /******************************************************* * 以下内容是播放器核心文件,不建议进行修改,否则可能导致播放器无法正常使用! * * 哈哈,吓唬你的!想改就改呗!不过建议修改之前先【备份】,要不然改坏了弄不好了。 ******************************************************/ // 存储全局变量 var rem = []; // 播放功能初始化 function audioInit() { var mkAudio = $("#mkplayer")[0]; // 应用初始音量 mkAudio.volume = volume_bar.percent; // 绑定歌曲进度变化事件 mkAudio.addEventListener('timeupdate', updateProgress); mkAudio.addEventListener('play', audioPlay); // 开始播放了 mkAudio.addEventListener('pause', audioPause); // 暂停 mkAudio.addEventListener('ended', nextMusic); // 播放结束 mkAudio.addEventListener('error', audioErr); // 播放器错误处理 } // 音频错误处理函数 function audioErr() { // 没播放过,直接跳过 if(rem.playlist === undefined) return true; layer.msg('当前歌曲播放失败,自动播放下一首'); nextMusic(); } // 点击暂停按钮的事件 function pause() { if(rem.paused === false) { // 之前是播放状态 $("#mkplayer")[0].pause(); // 暂停 } else { // 第一次点播放 if(rem.playlist === undefined) { rem.playlist = rem.dislist; musicList[1].item = musicList[rem.playlist].item; // 更新正在播放列表中音乐 // 正在播放 列表项已发生变更,进行保存 playerSavedata('playing', musicList[1].item); // 保存正在播放列表 listClick(0); } $("#mkplayer")[0].play(); } } // 播放 function audioPlay() { rem.paused = false; // 更新状态(未暂停) refreshList(); // 刷新状态,显示播放的波浪 $(".btn-play").addClass("btn-state-paused"); // 恢复暂停 } // 暂停 function audioPause() { rem.paused = true; // 更新状态(已暂停) $(".list-playing").removeClass("list-playing"); // 移除其它的正在播放 $(".btn-play").removeClass("btn-state-paused"); // 取消暂停 } // 播放上一首歌 function prevMusic() { playList(rem.playid - 1); } // 播放下一首歌 function nextMusic() { playList(rem.playid + 1); } // 歌曲时间变动回调函数 function updateProgress(){ // 暂停状态不管 if(rem.paused !== false) return true; // 同步进度条 music_bar.goto($("#mkplayer")[0].currentTime / $("#mkplayer")[0].duration); // 同步歌词显示 scrollLyric($("#mkplayer")[0].currentTime); } // 显示的列表中的某一项点击后的处理函数 // 参数:歌曲在列表中的编号 function listClick(no) { // 记录要播放的歌曲的id var tmpid = no; // 调试信息输出 if(mkPlayer.debug) { console.log("点播了列表中的第 " + (no + 1) + " 首歌 " + musicList[rem.dislist].item[no].musicName); } // 搜索列表的歌曲要额外处理 if(rem.dislist === 0) { // 没播放过 if(rem.playlist === undefined) { rem.playlist = 1; // 设置播放列表为 正在播放 列表 rem.playid = musicList[1].item.length - 1; // 临时设置正在播放的曲目为 正在播放 列表的最后一首 } // 查找当前的播放列表中是否已经存在这首歌 for(var i=0; i= musicList[1].item.length) id = 0; if(id < 0) id = musicList[1].item.length - 1; // 记录正在播放的歌曲在正在播放列表中的 id rem.playid = id; // 如果链接为空,则 ajax 获取数据后再播放 if(musicList[1].item[id].mp3Url === null) { ajaxUrl(musicList[1].item[id], play); } else { play(musicList[1].item[id]); } } // 播放音乐 // 参数:要播放的音乐数组 function play(music) { // 调试信息输出 if(mkPlayer.debug) { console.log('开始播放 - ' + music.musicName + '\n' + 'musicName: "' + music.musicName + '",\n' + 'artistsName: "' + music.artistsName + '",\n' + 'albumName: "' + music.albumName + '",\n' + 'albumPic: "' + music.albumPic + '",\n' + 'musicId: ' + music.musicId + ',\n' + 'mp3Url: "' + music.mp3Url + '"'); } // 遇到错误播放下一首歌 if(music.mp3Url == "err") { audioErr(); // 调用错误处理函数 return false; } addHis(music); // 添加到播放历史 // 如果当前主界面显示的是播放历史,那么还需要刷新列表显示 if(rem.dislist == 2 && rem.playlist !== 2) { loadList(2); } else { refreshList(); // 更新列表显示 } changeCover(music.albumPic); // 更新封面展示 ajaxLyric(music.musicId, lyricCallback); // ajax加载歌词 $("#mkplayer").attr("src", music.mp3Url); // 更改播放器音乐url $("#mkplayer")[0].play(); // 开始播放 } // 我的要求并不高,保留这一句版权信息可好? // 保留了,你不会损失什么;而保留版权,是对作者最大的尊重。 console.info('欢迎使用 MKOnlinePlayer!\n当前版本: v2.0 \n作者:mengkun(http://mkblog.cn)\n歌曲来源于:网易云音乐(http://music.163.com/)\nGithub:https://github.com/mengkunsoft/MKOnlineMusicPlayer'); // 音乐进度条拖动回调函数 function mBcallback(newVal) { var newTime = $("#mkplayer")[0].duration * newVal; // 应用新的进度 $("#mkplayer")[0].currentTime = newTime; refreshLyric(newTime); } // 音量条变动回调函数 // 参数:新的值 function vBcallback(newVal) { $("#mkplayer")[0].volume = newVal; if($(".btn-quiet").is('.btn-state-quiet')) { $(".btn-quiet").removeClass("btn-state-quiet"); // 取消静音 } if(newVal === 0) $(".btn-quiet").addClass("btn-state-quiet"); playerSavedata('volume', newVal); // 存储音量信息 } // 下面是进度条处理 var initProgress = function(){ // 初始化播放进度条 music_bar = new mkpgb("#music-progress", 0, mBcallback); // 初始化音量设定 var tmp_vol = playerReaddata('volume'); tmp_vol = tmp_vol? tmp_vol: (isMobile.any()? 1: mkPlayer.volume); volume_bar = new mkpgb("#volume-progress", tmp_vol, vBcallback); }; // mk进度条插件 // 进度条框 id,初始量,回调函数 mkpgb = function(bar, percent, callback){ this.bar = bar; this.percent = percent; this.callback = callback; this.locked = false; this.init(); }; mkpgb.prototype = { // 进度条初始化 init : function(){ var mk = this,mdown = false; // 加载进度条html元素 $(mk.bar).html('
'); // 获取偏移量 mk.minLength = $(mk.bar).offset().left; mk.maxLength = $(mk.bar).width() + mk.minLength; // 窗口大小改变偏移量重置 $(window).resize(function(){ mk.minLength = $(mk.bar).offset().left; mk.maxLength = $(mk.bar).width() + mk.minLength; }); // 监听小点的鼠标按下事件 $(mk.bar + " .mkpgb-dot").mousedown(function(e){ e.preventDefault(); // 取消原有事件的默认动作 }); // 监听进度条整体的鼠标按下事件 $(mk.bar).mousedown(function(e){ if(!mk.locked) mdown = true; barMove(e); }); // 监听鼠标移动事件,用于拖动 $("html").mousemove(function(e){ barMove(e); }); // 监听鼠标弹起事件,用于释放拖动 $("html").mouseup(function(e){ mdown = false; }); function barMove(e) { if(!mdown) return; var percent = 0; if(e.clientX < mk.minLength){ percent = 0; }else if(e.clientX > mk.maxLength){ percent = 1; }else{ percent = (e.clientX - mk.minLength) / (mk.maxLength - mk.minLength); } mk.callback(percent); mk.goto(percent); return true; } mk.goto(mk.percent); return true; }, // 跳转至某处 goto : function(percent) { if(percent > 1) percent = 1; if(percent < 0) percent = 0; this.percent = percent; $(this.bar + " .mkpgb-dot").css("left", (percent*100) +"%"); $(this.bar + " .mkpgb-cur").stop().animate({width: (percent*100)+"%"}, 200); return true; }, // 锁定进度条 lock : function(islock) { if(islock) { this.locked = true; $(this.bar).addClass("mkpgb-locked"); } else { this.locked = false; $(this.bar).removeClass("mkpgb-locked"); } return true; } }; // 初始化滚动条 initProgress();