341 lines
11 KiB
JavaScript
341 lines
11 KiB
JavaScript
/**************************************************
|
||
* 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; i++) {
|
||
if(musicList[1].item[i].musicId == musicList[0].item[no].musicId) {
|
||
tmpid = i;
|
||
playList(tmpid); // 找到了直接播放
|
||
return true;
|
||
}
|
||
}
|
||
|
||
// 将点击的这项追加到正在播放的条目的下方
|
||
musicList[1].item.splice(rem.playid + 1, 0, musicList[0].item[no]);
|
||
tmpid = rem.playid + 1;
|
||
|
||
// 正在播放 列表项已发生变更，进行保存
|
||
playerSavedata('playing', musicList[1].item); // 保存正在播放列表
|
||
} else { // 普通列表
|
||
// 与之前不是同一个列表了（在播放别的列表的歌曲）或者是首次播放
|
||
if((rem.dislist !== rem.playlist && rem.dislist !== 1) || rem.playlist === undefined) {
|
||
rem.playlist = rem.dislist; // 记录正在播放的列表
|
||
musicList[1].item = musicList[rem.playlist].item; // 更新正在播放列表中音乐
|
||
|
||
// 正在播放 列表项已发生变更，进行保存
|
||
playerSavedata('playing', musicList[1].item); // 保存正在播放列表
|
||
|
||
// 刷新正在播放的列表的动画
|
||
refreshSheet(); // 更改正在播放的列表的显示
|
||
}
|
||
}
|
||
|
||
playList(tmpid);
|
||
|
||
return true;
|
||
}
|
||
|
||
// 播放正在播放列表中的歌曲
|
||
// 参数：歌曲在列表中的ID
|
||
function playList(id) {
|
||
// 第一次播放
|
||
if(rem.playlist === undefined) {
|
||
pause();
|
||
return true;
|
||
}
|
||
|
||
// 没有歌曲，跳出
|
||
if(musicList[1].item.length <= 0) return true;
|
||
|
||
// ID 范围限定
|
||
if(id >= 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('<div class="mkpgb-bar"></div><div class="mkpgb-cur"></div><div class="mkpgb-dot"></div>');
|
||
// 获取偏移量
|
||
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();
|