You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
473 lines
16 KiB
473 lines
16 KiB
5 years ago
|
/**************************************************
|
||
|
* MKOnlinePlayer v2.41
|
||
|
* 播放器主功能模块
|
||
|
* 编写:mengkun(https://mkblog.cn)
|
||
|
* 时间:2018-3-13
|
||
|
*************************************************/
|
||
|
// 播放器功能配置
|
||
|
var mkPlayer = {
|
||
|
api: "api.php", // api地址
|
||
|
loadcount: 20, // 搜索结果一次加载多少条
|
||
|
method: "POST", // 数据传输方式(POST/GET)
|
||
|
defaultlist: 3, // 默认要显示的播放列表编号
|
||
|
autoplay: false, // 是否自动播放(true/false) *此选项在移动端可能无效
|
||
|
coverbg: true, // 是否开启封面背景(true/false) *开启后会有些卡
|
||
|
mcoverbg: true, // 是否开启[移动端]封面背景(true/false)
|
||
|
dotshine: true, // 是否开启播放进度条的小点闪动效果[不支持IE](true/false) *开启后会有些卡
|
||
|
mdotshine: false, // 是否开启[移动端]播放进度条的小点闪动效果[不支持IE](true/false)
|
||
|
volume: 0.6, // 默认音量值(0~1之间)
|
||
|
version: "v2.41", // 播放器当前版本号(仅供调试)
|
||
|
debug: false // 是否开启调试模式(true/false)
|
||
|
};
|
||
|
|
||
|
|
||
|
|
||
|
/*******************************************************
|
||
|
* 以下内容是播放器核心文件,不建议进行修改,否则可能导致播放器无法正常使用!
|
||
|
*
|
||
|
* 哈哈,吓唬你的!想改就改呗!不过建议修改之前先【备份】,要不然改坏了弄不好了。
|
||
|
******************************************************/
|
||
|
|
||
|
// 存储全局变量
|
||
|
var rem = [];
|
||
|
|
||
|
// 音频错误处理函数
|
||
|
function audioErr() {
|
||
|
// 没播放过,直接跳过
|
||
|
if(rem.playlist === undefined) return true;
|
||
|
|
||
|
if(rem.errCount > 10) { // 连续播放失败的歌曲过多
|
||
|
layer.msg('似乎出了点问题~播放已停止');
|
||
|
rem.errCount = 0;
|
||
|
} else {
|
||
|
rem.errCount++; // 记录连续播放失败的歌曲数目
|
||
|
layer.msg('当前歌曲播放失败,自动播放下一首');
|
||
|
nextMusic(); // 切换下一首歌
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 点击暂停按钮的事件
|
||
|
function pause() {
|
||
|
if(rem.paused === false) { // 之前是播放状态
|
||
|
rem.audio[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);
|
||
|
}
|
||
|
rem.audio[0].play();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 循环顺序
|
||
|
function orderChange() {
|
||
|
var orderDiv = $(".btn-order");
|
||
|
orderDiv.removeClass();
|
||
|
switch(rem.order) {
|
||
|
case 1: // 单曲循环 -> 列表循环
|
||
|
orderDiv.addClass("player-btn btn-order btn-order-list");
|
||
|
orderDiv.attr("title", "列表循环");
|
||
|
layer.msg("列表循环");
|
||
|
rem.order = 2;
|
||
|
break;
|
||
|
|
||
|
case 3: // 随机播放 -> 单曲循环
|
||
|
orderDiv.addClass("player-btn btn-order btn-order-single");
|
||
|
orderDiv.attr("title", "单曲循环");
|
||
|
layer.msg("单曲循环");
|
||
|
rem.order = 1;
|
||
|
break;
|
||
|
|
||
|
// case 2:
|
||
|
default: // 列表循环(其它) -> 随机播放
|
||
|
orderDiv.addClass("player-btn btn-order btn-order-random");
|
||
|
orderDiv.attr("title", "随机播放");
|
||
|
layer.msg("随机播放");
|
||
|
rem.order = 3;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 播放
|
||
|
function audioPlay() {
|
||
|
rem.paused = false; // 更新状态(未暂停)
|
||
|
refreshList(); // 刷新状态,显示播放的波浪
|
||
|
$(".btn-play").addClass("btn-state-paused"); // 恢复暂停
|
||
|
|
||
|
if((mkPlayer.dotshine === true && !rem.isMobile) || (mkPlayer.mdotshine === true && rem.isMobile)) {
|
||
|
$("#music-progress .mkpgb-dot").addClass("dot-move"); // 小点闪烁效果
|
||
|
}
|
||
|
|
||
|
var music = musicList[rem.playlist].item[rem.playid]; // 获取当前播放的歌曲信息
|
||
|
var msg = " 正在播放: " + music.name + " - " + music.artist; // 改变浏览器标题
|
||
|
|
||
|
// 清除定时器
|
||
|
if (rem.titflash !== undefined )
|
||
|
{
|
||
|
clearInterval(rem.titflash);
|
||
|
}
|
||
|
// 标题滚动
|
||
|
titleFlash(msg);
|
||
|
}
|
||
|
// 标题滚动
|
||
|
function titleFlash(msg) {
|
||
|
|
||
|
// 截取字符
|
||
|
var tit = function() {
|
||
|
msg = msg.substring(1,msg.length)+ msg.substring(0,1);
|
||
|
document.title = msg;
|
||
|
};
|
||
|
// 设置定时间 300ms滚动
|
||
|
rem.titflash = setInterval(function(){tit()}, 300);
|
||
|
}
|
||
|
// 暂停
|
||
|
function audioPause() {
|
||
|
rem.paused = true; // 更新状态(已暂停)
|
||
|
|
||
|
$(".list-playing").removeClass("list-playing"); // 移除其它的正在播放
|
||
|
|
||
|
$(".btn-play").removeClass("btn-state-paused"); // 取消暂停
|
||
|
|
||
|
$("#music-progress .dot-move").removeClass("dot-move"); // 小点闪烁效果
|
||
|
|
||
|
// 清除定时器
|
||
|
if (rem.titflash !== undefined )
|
||
|
{
|
||
|
clearInterval(rem.titflash);
|
||
|
}
|
||
|
document.title = rem.webTitle; // 改变浏览器标题
|
||
|
}
|
||
|
|
||
|
// 播放上一首歌
|
||
|
function prevMusic() {
|
||
|
playList(rem.playid - 1);
|
||
|
}
|
||
|
|
||
|
// 播放下一首歌
|
||
|
function nextMusic() {
|
||
|
switch (rem.order ? rem.order : 1) {
|
||
|
case 1,2:
|
||
|
playList(rem.playid + 1);
|
||
|
break;
|
||
|
case 3:
|
||
|
if (musicList[1] && musicList[1].item.length) {
|
||
|
var id = parseInt(Math.random() * musicList[1].item.length);
|
||
|
playList(id);
|
||
|
}
|
||
|
break;
|
||
|
default:
|
||
|
playList(rem.playid + 1);
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
// 自动播放时的下一首歌
|
||
|
function autoNextMusic() {
|
||
|
if(rem.order && rem.order === 1) {
|
||
|
playList(rem.playid);
|
||
|
} else {
|
||
|
nextMusic();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 歌曲时间变动回调函数
|
||
|
function updateProgress(){
|
||
|
// 暂停状态不管
|
||
|
if(rem.paused !== false) return true;
|
||
|
// 同步进度条
|
||
|
music_bar.goto(rem.audio[0].currentTime / rem.audio[0].duration);
|
||
|
// 同步歌词显示
|
||
|
scrollLyric(rem.audio[0].currentTime);
|
||
|
}
|
||
|
|
||
|
// 显示的列表中的某一项点击后的处理函数
|
||
|
// 参数:歌曲在列表中的编号
|
||
|
function listClick(no) {
|
||
|
// 记录要播放的歌曲的id
|
||
|
var tmpid = no;
|
||
|
|
||
|
// 调试信息输出
|
||
|
if(mkPlayer.debug) {
|
||
|
console.log("点播了列表中的第 " + (no + 1) + " 首歌 " + musicList[rem.dislist].item[no].name);
|
||
|
}
|
||
|
|
||
|
// 搜索列表的歌曲要额外处理
|
||
|
if(rem.dislist === 0) {
|
||
|
|
||
|
// 没播放过
|
||
|
if(rem.playlist === undefined) {
|
||
|
rem.playlist = 1; // 设置播放列表为 正在播放 列表
|
||
|
rem.playid = musicList[1].item.length - 1; // 临时设置正在播放的曲目为 正在播放 列表的最后一首
|
||
|
}
|
||
|
|
||
|
// 获取选定歌曲的信息
|
||
|
var tmpMusic = musicList[0].item[no];
|
||
|
|
||
|
|
||
|
// 查找当前的播放列表中是否已经存在这首歌
|
||
|
for(var i=0; i<musicList[1].item.length; i++) {
|
||
|
if(musicList[1].item[i].id == tmpMusic.id && musicList[1].item[i].source == tmpMusic.source) {
|
||
|
tmpid = i;
|
||
|
playList(tmpid); // 找到了直接播放
|
||
|
return true; // 退出函数
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// 将点击的这项追加到正在播放的条目的下方
|
||
|
musicList[1].item.splice(rem.playid + 1, 0, tmpMusic);
|
||
|
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].url === null || musicList[1].item[id].url === "") {
|
||
|
ajaxUrl(musicList[1].item[id], play);
|
||
|
} else {
|
||
|
play(musicList[1].item[id]);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 初始化 Audio
|
||
|
function initAudio() {
|
||
|
rem.audio = $('<audio></audio>').appendTo('body');
|
||
|
|
||
|
// 应用初始音量
|
||
|
rem.audio[0].volume = volume_bar.percent;
|
||
|
// 绑定歌曲进度变化事件
|
||
|
rem.audio[0].addEventListener('timeupdate', updateProgress); // 更新进度
|
||
|
rem.audio[0].addEventListener('play', audioPlay); // 开始播放了
|
||
|
rem.audio[0].addEventListener('pause', audioPause); // 暂停
|
||
|
$(rem.audio[0]).on('ended', autoNextMusic); // 播放结束
|
||
|
rem.audio[0].addEventListener('error', audioErr); // 播放器错误处理
|
||
|
}
|
||
|
|
||
|
|
||
|
// 播放音乐
|
||
|
// 参数:要播放的音乐数组
|
||
|
function play(music) {
|
||
|
// 调试信息输出
|
||
|
if(mkPlayer.debug) {
|
||
|
console.log('开始播放 - ' + music.name);
|
||
|
|
||
|
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: "' + music.url + '"');
|
||
|
}
|
||
|
|
||
|
// 遇到错误播放下一首歌
|
||
|
if(music.url == "err") {
|
||
|
audioErr(); // 调用错误处理函数
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
addHis(music); // 添加到播放历史
|
||
|
|
||
|
// 如果当前主界面显示的是播放历史,那么还需要刷新列表显示
|
||
|
if(rem.dislist == 2 && rem.playlist !== 2) {
|
||
|
loadList(2);
|
||
|
} else {
|
||
|
refreshList(); // 更新列表显示
|
||
|
}
|
||
|
|
||
|
try {
|
||
|
rem.audio[0].pause();
|
||
|
rem.audio.attr('src', music.url);
|
||
|
rem.audio[0].play();
|
||
|
} catch(e) {
|
||
|
audioErr(); // 调用错误处理函数
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
rem.errCount = 0; // 连续播放失败的歌曲数归零
|
||
|
music_bar.goto(0); // 进度条强制归零
|
||
|
changeCover(music); // 更新封面展示
|
||
|
ajaxLyric(music, lyricCallback); // ajax加载歌词
|
||
|
music_bar.lock(false); // 取消进度条锁定
|
||
|
}
|
||
|
|
||
|
|
||
|
// 我的要求并不高,保留这一句版权信息可好?
|
||
|
// 保留了,你不会损失什么;而保留版权,是对作者最大的尊重。
|
||
|
console.info('欢迎使用 MKOnlinePlayer!\n当前版本:'+mkPlayer.version+' \n作者:mengkun(https://mkblog.cn)\n歌曲来源于各大音乐平台\nGithub:https://github.com/mengkunsoft/MKOnlineMusicPlayer');
|
||
|
|
||
|
// 音乐进度条拖动回调函数
|
||
|
function mBcallback(newVal) {
|
||
|
var newTime = rem.audio[0].duration * newVal;
|
||
|
// 应用新的进度
|
||
|
rem.audio[0].currentTime = newTime;
|
||
|
refreshLyric(newTime); // 强制滚动歌词到当前进度
|
||
|
}
|
||
|
|
||
|
// 音量条变动回调函数
|
||
|
// 参数:新的值
|
||
|
function vBcallback(newVal) {
|
||
|
if(rem.audio[0] !== undefined) { // 音频对象已加载则立即改变音量
|
||
|
rem.audio[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);
|
||
|
music_bar.lock(true); // 未播放时锁定不让拖动
|
||
|
// 初始化音量设定
|
||
|
var tmp_vol = playerReaddata('volume');
|
||
|
tmp_vol = (tmp_vol != null)? tmp_vol: (rem.isMobile? 1: mkPlayer.volume);
|
||
|
if(tmp_vol < 0) tmp_vol = 0; // 范围限定
|
||
|
if(tmp_vol > 1) tmp_vol = 1;
|
||
|
if(tmp_vol == 0) $(".btn-quiet").addClass("btn-state-quiet"); // 添加静音样式
|
||
|
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").css("width", (percent*100)+"%");
|
||
|
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;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
// 快捷键切歌,代码来自 @茗血(https://www.52benxi.cn/)
|
||
|
document.onkeydown = function showkey(e) {
|
||
|
var key = e.keyCode || e.which || e.charCode;
|
||
|
var ctrl = e.ctrlKey || e.metaKey;
|
||
|
var isFocus = $('input').is(":focus");
|
||
|
if (ctrl && key == 37) playList(rem.playid - 1); // Ctrl+左方向键 切换上一首歌
|
||
|
if (ctrl && key == 39) playList(rem.playid + 1); // Ctrl+右方向键 切换下一首歌
|
||
|
if (key == 32 && isFocus == false) pause(); // 空格键 播放/暂停歌曲
|
||
|
}
|