mengkunsoft
parent
8d4951890a
commit
bebc54e5e5
18
README.MD
18
README.MD
|
|
@ -1,4 +1,4 @@
|
|||
MKOnlineMusicPlayer V2.0
|
||||
MKOnlineMusicPlayer V2.1
|
||||
========
|
||||
MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播
|
|||
### 注意事项
|
||||
-----
|
||||
#### 关于API文件
|
||||
由于网易云音乐官方封锁了国外的访问，因此本播放器的 api.php 在海外的空间上可能无法运行(其实有个“你懂的”的功能，请自行挖掘)，建议在国内空间使用。
|
||||
由于网易云音乐官方封锁了国外的访问，因此本播放器的 api.php 在海外的空间上可能无法运行，具体表现为无法搜索歌曲，因此建议在国内空间使用本播放器(其实有个“你懂的”的功能，请自行挖掘)。
|
||||
|
||||
#### 关于兼容性
|
||||
本播放器设计支持 IE9及以上的现代浏览器。并且已在 Chrome、firefox、IE11 等浏览器测试使用正常。
|
||||
|
|
@ -31,6 +31,16 @@ MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播
|
|||
|
||||
### 更新日志
|
||||
-----
|
||||
#### v2.1 `2017/3/20`
|
||||
- 紧急修复部分浏览器下切换歌曲造成无限播放失败循环的 BUG
|
||||
- 新增点击未加载完的播放列表弹出提示
|
||||
- 新增搜索时弹出加载中动画
|
||||
- 切换歌曲后进度条自动复位
|
||||
- 优化歌曲外链显示方式，方便复制
|
||||
- 优化封面图像加载大小
|
||||
- 新增无歌词、歌词加载中提示
|
||||
- 优化歌词展现方式
|
||||
|
||||
#### v2.0 Beta `2017/3/18`
|
||||
- 所有代码均推翻重写，前端界面全新改版
|
||||
- 完善对手机端的适配，新支持 IE9~IE11 浏览器
|
||||
|
|
@ -45,6 +55,9 @@ MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播
|
|||
- 修复一些已知BUG
|
||||
(因逻辑过于混乱，代码过于庞杂，此版本废弃)
|
||||
|
||||
#### v1.2 `未发布`
|
||||
- 这个版本的存档神秘失踪，我也不记得有哪些改变。。
|
||||
|
||||
#### v1.1 `2016/10/27`
|
||||
- 修复宽屏下背景覆盖缺失的BUG
|
||||
- 修复打开页面后直接点击播放无效的BUG
|
||||
|
|
@ -74,6 +87,7 @@ MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播
|
|||
|
||||
| 变量名 | 用途 |
|
||||
| ----------- | ----------- |
|
||||
| rem.audio | audio dom |
|
||||
| rem.playlist | 当前正在播放的播放列表编号 |
|
||||
| rem.playid | 正在播放的这首歌在播放列表中的编号 |
|
||||
| rem.dislist | 当前显示的列表的列表编号 |
|
||||
|
|
|
|||
8
api.php
8
api.php
|
|
@ -1,15 +1,15 @@
|
|||
<?php
|
||||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* MKOnlinePlayer v2.1
|
||||
* 后台音乐数据抓取模块
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
* 时间：2017-3-20
|
||||
*************************************************/
|
||||
|
||||
// api设置
|
||||
$GLOBALS['config'] = array(
|
||||
'proxy' => false, // 是否使用代理（true/false）
|
||||
'proxyIP' => '222.186.34.84', // 代理 IP
|
||||
'proxy' => false, // 是否使用代理（true/false） 海外空间请将这一选项设为 true
|
||||
'proxyIP' => '222.186.34.84', // 代理 IP （这里的代理是随手搜的，可能有点慢）
|
||||
'proxyPort' => 8998, // 代理端口
|
||||
'proxyUserpwd' => '' // 代理账号及密码(不需要则留空) 格式为 '用户名:密码'
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@charset "utf-8";
|
||||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* MKOnlinePlayer v2.1
|
||||
* 播放器样式表文件
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
* 时间：2017-3-20
|
||||
*************************************************/
|
||||
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, input, lengend, li, ol, p, pre, td, textarea, th, ul {
|
||||
margin: 0;
|
||||
|
|
@ -341,6 +341,12 @@ html,body{
|
|||
background-position: -120px -40px;
|
||||
}
|
||||
|
||||
/* 分享弹窗中的链接框 */
|
||||
.share-url {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 列表中点击加载更多 */
|
||||
.list-loadmore {
|
||||
cursor: pointer;
|
||||
|
|
@ -462,6 +468,13 @@ html,body{
|
|||
#lyric .lplaying {
|
||||
color: #31c27c;
|
||||
}
|
||||
/* 歌词显示区显示的提示语(如加载中、无歌词等) */
|
||||
.lyric-tip {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
/* 歌曲信息按钮 */
|
||||
#music-info {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<meta name="x5-fullscreen" content="true"><!--QQ强制全屏-->
|
||||
<meta name="x5-page-mode" content="app"><!--QQ应用模式-->
|
||||
|
||||
<title>MKOnlinePlayer v2.0</title>
|
||||
<title>MKOnlinePlayer v2.1</title>
|
||||
<meta name="description" content="一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。"/>
|
||||
<meta name="keywords" content="孟坤播放器,在线音乐播放器,MKOnlinePlayer,网易云音乐,音乐api,音乐播放器源代码"/>
|
||||
|
||||
|
|
@ -38,16 +38,13 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 播放器本体 -->
|
||||
<audio id="mkplayer" src=""></audio>
|
||||
|
||||
<!-- 模糊化背景 -->
|
||||
<canvas id="blur-canvas"></canvas>
|
||||
<div id="blur"></div>
|
||||
|
||||
<!-- 头部logo -->
|
||||
<div class="header">
|
||||
<div class="logo" title="Version 2.0; Based on 163music; Powered by mengkun">
|
||||
<div class="logo" title="Version 2.1; Based on 163music; Powered by Mengkun">
|
||||
♫ MKOnlinePlayer
|
||||
</div>
|
||||
</div> <!--class="header"-->
|
||||
|
|
|
|||
14
js/ajax.js
14
js/ajax.js
|
|
@ -1,12 +1,15 @@
|
|||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* MKOnlinePlayer v2.1
|
||||
* Ajax 后台数据交互请求模块
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
* 时间：2017-3-20
|
||||
*************************************************/
|
||||
|
||||
// ajax加载搜索结果
|
||||
function ajaxSearch() {
|
||||
if(rem.loadPage == 1) { // 弹出搜索提示
|
||||
var tmpLoading = layer.msg('搜索中', {icon: 16,shade: 0.01});
|
||||
}
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: mkPlayer.api,
|
||||
|
|
@ -31,6 +34,7 @@ function ajaxSearch() {
|
|||
|
||||
if(rem.loadPage == 1) // 加载第一页，清空列表
|
||||
{
|
||||
layer.close(tmpLoading); // 关闭加载中动画
|
||||
musicList[0].item = [];
|
||||
rem.mainList.html(''); // 清空列表中原有的元素
|
||||
addListhead(); // 加载列表头
|
||||
|
|
@ -132,7 +136,7 @@ function ajaxPlayList(lid, id, callback){
|
|||
|
||||
// 已经在加载了，跳过
|
||||
if(musicList[id].isloading === true) {
|
||||
layer.load(2, {shade: false,time: 500}); //0代表加载的风格，支持0-2
|
||||
layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); //0代表加载的风格，支持0-2
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
@ -213,7 +217,9 @@ function ajaxPlayList(lid, id, callback){
|
|||
// ajax加载歌词
|
||||
// 参数：音乐ID，回调函数
|
||||
function ajaxLyric(mid, callback) {
|
||||
if(!mid) return false;
|
||||
lyricTip('歌词加载中...');
|
||||
|
||||
if(!mid) callback(''); // 没有音乐ID，直接返回
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
|
|
|
|||
|
|
@ -68,9 +68,6 @@ $(function(){
|
|||
case "sheet": // 播放列表
|
||||
dataBox("sheet"); // 在主界面显示出音乐专辑
|
||||
break;
|
||||
|
||||
default:
|
||||
layer.msg('这个功能还没加');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -229,7 +226,7 @@ $(function(){
|
|||
var tempStr = "<span class='info-title'>歌名：</span>" + tmpMusic.musicName +
|
||||
"<br><span class='info-title'>歌手：</span>" + tmpMusic.artistsName +
|
||||
"<br><span class='info-title'>专辑：</span>" + tmpMusic.albumName +
|
||||
"<br><span class='info-title'>时长：</span>" + formatTime($("#mkplayer")[0].duration) +
|
||||
"<br><span class='info-title'>时长：</span>" + formatTime(rem.audio.duration) +
|
||||
"<br><span class='info-title'>操作：</span><span class='info-btn' onclick='thisDownload()'>下载</span><span style='margin-left: 10px' class='info-btn' onclick='thisShare()'>外链</span>";
|
||||
|
||||
layer.open({
|
||||
|
|
@ -262,20 +259,17 @@ $(function(){
|
|||
if($(this).is('.btn-state-quiet')) {
|
||||
oldVol = $(this).data("volume");
|
||||
$(this).removeClass("btn-state-quiet"); // 取消静音
|
||||
$("#mkplayer")[0].volume = oldVol;
|
||||
rem.audio.volume = oldVol;
|
||||
volume_bar.goto(oldVol); // 恢复之前的音量
|
||||
} else {
|
||||
oldVol = volume_bar.percent;
|
||||
$("#mkplayer")[0].volume = 0;
|
||||
rem.audio.volume = 0;
|
||||
$(this).addClass("btn-state-quiet"); // 开启静音
|
||||
$(this).data("volume", oldVol); // 记录当前音量值
|
||||
volume_bar.goto(0); // 音量归零
|
||||
}
|
||||
});
|
||||
|
||||
// 播放功能初始化
|
||||
audioInit();
|
||||
|
||||
// 初始化播放列表
|
||||
initList();
|
||||
});
|
||||
|
|
@ -302,7 +296,7 @@ function download(music) {
|
|||
function ajaxShare(music) {
|
||||
layer.open({
|
||||
title: '歌曲分享'
|
||||
,content: music.artistsName + ' - ' + music.musicName + ' 的外链地址为：<br>' + music.mp3Url
|
||||
,content: music.artistsName + ' - ' + music.musicName + ' 的外链地址为：<br><textarea class="share-url" rows="3" onmouseover="this.focus();this.select()">' + music.mp3Url + '</textarea>'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -312,6 +306,7 @@ 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); // 改变正在播放列表的图像
|
||||
|
||||
|
|
@ -354,6 +349,11 @@ function search(str) {
|
|||
|
||||
// 向列表中载入某个播放列表
|
||||
function loadList(list) {
|
||||
if(musicList[list].isloading === true) {
|
||||
layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500});
|
||||
return true;
|
||||
}
|
||||
|
||||
dataBox("list"); // 在主界面显示出播放列表
|
||||
|
||||
// 调试信息输出
|
||||
|
|
@ -514,6 +514,7 @@ function refreshList() {
|
|||
function addSheet(no, name, cover) {
|
||||
if(!cover) cover = "images/player_cover.png";
|
||||
if(!name) name = "读取中...";
|
||||
cover += "?param=186x186"; // 限制封面图像大小
|
||||
var html = '<div class="sheet-item" data-no="' + no + '">' +
|
||||
' <img class="sheet-cover" src="' +cover+ '">' +
|
||||
' <p class="sheet-name">' +name+ '</p>' +
|
||||
|
|
|
|||
29
js/lyric.js
29
js/lyric.js
|
|
@ -1,32 +1,46 @@
|
|||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* MKOnlinePlayer v2.1
|
||||
* 歌词解析及滚动模块
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
* 时间：2017-3-20
|
||||
*************************************************/
|
||||
|
||||
var lyricArea = $("#lyric"); // 歌词显示容器
|
||||
|
||||
// 在歌词区显示提示语（如歌词加载中、无歌词等）
|
||||
function lyricTip(str) {
|
||||
lyricArea.html("<li class='lyric-tip'>"+str+"</li>"); // 显示内容
|
||||
}
|
||||
|
||||
// 歌曲加载完后的回调函数
|
||||
// 参数：歌词源文件
|
||||
function lyricCallback(str) {
|
||||
rem.lyric = parseLyric(str); // 解析获取到的歌词
|
||||
|
||||
if(rem.lyric === '') {
|
||||
lyricTip('没有歌词');
|
||||
return false;
|
||||
}
|
||||
|
||||
lyricArea.html(''); // 清空歌词区域的内容
|
||||
lyricArea.scrollLeft(0); // 滚动到顶部
|
||||
|
||||
// 显示全部歌词
|
||||
var i = 0;
|
||||
for(var k in rem.lyric){
|
||||
var txt = rem.lyric[k];
|
||||
if(!txt) txt = " ";
|
||||
var li = $("<li>"+txt+"</li>");
|
||||
var li = $("<li data-no='"+i+"' class='lrc-item'>"+txt+"</li>");
|
||||
lyricArea.append(li);
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
// 强制刷新当前时间点的歌词
|
||||
// 参数：当前播放时间（单位：秒）
|
||||
function refreshLyric(time) {
|
||||
if(rem.lyric === '') return false;
|
||||
|
||||
time = parseInt(time); // 时间取整
|
||||
var i = 0;
|
||||
for(var k in rem.lyric){
|
||||
|
|
@ -37,9 +51,11 @@ function refreshLyric(time) {
|
|||
scrollLyric(i);
|
||||
}
|
||||
|
||||
// 滚动歌词
|
||||
// 滚动歌词到指定句
|
||||
// 参数：当前播放时间（单位：秒）
|
||||
function scrollLyric(time) {
|
||||
if(rem.lyric === '') return false;
|
||||
|
||||
time = parseInt(time); // 时间取整
|
||||
|
||||
if(rem.lyric === undefined || rem.lyric[time] === undefined) return false; // 当前时间点没有歌词
|
||||
|
|
@ -52,8 +68,8 @@ function scrollLyric(time) {
|
|||
i ++;
|
||||
}
|
||||
rem.lastLyric = time; // 记录方便下次使用
|
||||
$(".lplaying").removeClass("lplaying");
|
||||
lyricArea.children().eq(i).attr("class","lplaying"); // 加上正在播放样式
|
||||
$(".lplaying").removeClass("lplaying"); // 移除其余句子的正在播放样式
|
||||
$(".lrc-item[data-no='" + i + "']").addClass("lplaying"); // 加上正在播放样式
|
||||
|
||||
var scroll = (lyricArea.children().height() * i) - ($(".lyric").height() / 2);
|
||||
lyricArea.stop().animate({scrollTop: scroll}, 300); // 平滑滚动到当前歌词位置
|
||||
|
|
@ -63,6 +79,7 @@ function scrollLyric(time) {
|
|||
// 解析歌词
|
||||
// 参数：原始歌词文件
|
||||
function parseLyric(lrc) {
|
||||
if(lrc === '') return '';
|
||||
var lyrics = lrc.split("\n");
|
||||
var lrcObj = {};
|
||||
for(var i=0;i<lyrics.length;i++){
|
||||
|
|
|
|||
49
js/player.js
49
js/player.js
|
|
@ -12,7 +12,7 @@ var mkPlayer = {
|
|||
defaultlist: 3, // 默认要显示的播放列表编号
|
||||
autoplay: false, // 是否自动播放(true/false) *在手机端可能无法自动播放
|
||||
volume: 0.6, // 默认音量值(0~1之间)
|
||||
debug: false // 是否开启调试模式(true/false)
|
||||
debug: true // 是否开启调试模式(true/false)
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -26,19 +26,6 @@ var mkPlayer = {
|
|||
// 存储全局变量
|
||||
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() {
|
||||
// 没播放过，直接跳过
|
||||
|
|
@ -51,7 +38,7 @@ function audioErr() {
|
|||
// 点击暂停按钮的事件
|
||||
function pause() {
|
||||
if(rem.paused === false) { // 之前是播放状态
|
||||
$("#mkplayer")[0].pause(); // 暂停
|
||||
rem.audio.pause(); // 暂停
|
||||
} else {
|
||||
// 第一次点播放
|
||||
if(rem.playlist === undefined) {
|
||||
|
|
@ -64,7 +51,7 @@ function pause() {
|
|||
|
||||
listClick(0);
|
||||
}
|
||||
$("#mkplayer")[0].play();
|
||||
rem.audio.play();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,9 +86,9 @@ function updateProgress(){
|
|||
// 暂停状态不管
|
||||
if(rem.paused !== false) return true;
|
||||
// 同步进度条
|
||||
music_bar.goto($("#mkplayer")[0].currentTime / $("#mkplayer")[0].duration);
|
||||
music_bar.goto(rem.audio.currentTime / rem.audio.duration);
|
||||
// 同步歌词显示
|
||||
scrollLyric($("#mkplayer")[0].currentTime);
|
||||
scrollLyric(rem.audio.currentTime);
|
||||
}
|
||||
|
||||
// 显示的列表中的某一项点击后的处理函数
|
||||
|
|
@ -204,6 +191,8 @@ function play(music) {
|
|||
return false;
|
||||
}
|
||||
|
||||
music_bar.goto(0); // 进度条强制归零
|
||||
|
||||
addHis(music); // 添加到播放历史
|
||||
|
||||
// 如果当前主界面显示的是播放历史，那么还需要刷新列表显示
|
||||
|
|
@ -215,26 +204,38 @@ function play(music) {
|
|||
|
||||
changeCover(music.albumPic); // 更新封面展示
|
||||
ajaxLyric(music.musicId, lyricCallback); // ajax加载歌词
|
||||
$("#mkplayer").attr("src", music.mp3Url); // 更改播放器音乐url
|
||||
$("#mkplayer")[0].play(); // 开始播放
|
||||
$('audio').remove(); // 移除之前的audio
|
||||
|
||||
var newaudio = $('<audio>').html('<source src="'+ music.mp3Url +'">').appendTo('html');
|
||||
rem.audio = newaudio[0];
|
||||
// 应用初始音量
|
||||
rem.audio.volume = volume_bar.percent;
|
||||
// 绑定歌曲进度变化事件
|
||||
rem.audio.addEventListener('timeupdate', updateProgress);
|
||||
rem.audio.addEventListener('play', audioPlay); // 开始播放了
|
||||
rem.audio.addEventListener('pause', audioPause); // 暂停
|
||||
rem.audio.addEventListener('ended', nextMusic); // 播放结束
|
||||
rem.audio.addEventListener('error', audioErr); // 播放器错误处理
|
||||
|
||||
rem.audio.play();
|
||||
}
|
||||
|
||||
// 我的要求并不高，保留这一句版权信息可好？
|
||||
// 保留了，你不会损失什么；而保留版权，是对作者最大的尊重。
|
||||
console.info('欢迎使用 MKOnlinePlayer!\n当前版本： v2.0 \n作者：mengkun(http://mkblog.cn)\n歌曲来源于：网易云音乐(http://music.163.com/)\nGithub：https://github.com/mengkunsoft/MKOnlineMusicPlayer');
|
||||
console.info('欢迎使用 MKOnlinePlayer!\n当前版本： v2.1 \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;
|
||||
var newTime = rem.audio.duration * newVal;
|
||||
// 应用新的进度
|
||||
$("#mkplayer")[0].currentTime = newTime;
|
||||
rem.audio.currentTime = newTime;
|
||||
refreshLyric(newTime);
|
||||
}
|
||||
|
||||
// 音量条变动回调函数
|
||||
// 参数：新的值
|
||||
function vBcallback(newVal) {
|
||||
$("#mkplayer")[0].volume = newVal;
|
||||
rem.audio.volume = newVal;
|
||||
|
||||
if($(".btn-quiet").is('.btn-state-quiet')) {
|
||||
$(".btn-quiet").removeClass("btn-state-quiet"); // 取消静音
|
||||
|
|
|
|||
Loading…
Reference in New Issue