add:新增歌词功能
This commit is contained in:
parent
f57325c327
commit
fefcfe6c35
|
|
@ -0,0 +1,27 @@
|
|||
#lyricer {
|
||||
font-size: 100%;
|
||||
font-family: "Microsoft YaHei","Hiragino Sans GB W3",Tahoma,Arial;
|
||||
text-shadow: 0 0 1px #EEEEEE;
|
||||
color: #666666;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#lyricer ul {
|
||||
list-style-type: none;
|
||||
padding: 5px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
#lyricer ul li {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#lyricer ul li:hover {
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
#lyricer .lyricer-current-line {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #ff2d95, 0 0 6px #ff2d95, 0 0 8px #ff2d95, 0 0 10px #ff2d95, 0 0 12px #ff2d95;
|
||||
padding:10px
|
||||
}
|
||||
|
|
@ -6,19 +6,20 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>来点Music~</title>
|
||||
<link rel="stylesheet" href="/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="/css/lyricer.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<div id="header"></div>
|
||||
|
||||
<div class="layui-body mybody body2">
|
||||
<!-- <div id="side"></div>-->
|
||||
<!-- <div id="side"></div>-->
|
||||
|
||||
<div style="margin-left: 2%; margin-top: 2%;">
|
||||
<div>
|
||||
<img src="/assets/defaultPlayImg.jpg" id="img" style="height: 200px; width: 200px"/>
|
||||
<img src="/assets/defaultPlayImg.jpg" id="img" style="height: 300px; width: 300px"/>
|
||||
|
||||
<div style="display:inline-block;">
|
||||
<div style="top: 800px;display:inline-block;">
|
||||
<div id="musicSize">歌单总数:</div>
|
||||
<div id="playerNowList">播放列表:</div>
|
||||
<div id="title">标题:</div>
|
||||
|
|
@ -28,6 +29,7 @@
|
|||
<a class="layui-btn layui-btn-normal" id="download">下载</a>
|
||||
<a class="layui-btn layui-btn-normal" id="next">下一首</a>
|
||||
<a class="layui-btn layui-btn-normal" id="play_share">分享</a>
|
||||
<a class="layui-btn layui-btn-normal" id="showLrc">显示歌词</a>
|
||||
</div>
|
||||
|
||||
<div id="audioWrap"></div>
|
||||
|
|
@ -44,6 +46,7 @@
|
|||
<script src="/layui/layui.js"></script>
|
||||
<script src="/js/jquery-3.2.1.js"></script>
|
||||
<script src="/js/myjs.js"></script>
|
||||
<script src="/js/lyricer.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/AudioPlayer.css">
|
||||
<script src="/js/AudioPlayer.js"></script>
|
||||
<script id="listTemplet">
|
||||
|
|
@ -64,23 +67,24 @@
|
|||
let isRandom = true;
|
||||
let playIndex = 0;
|
||||
let playNow = ""
|
||||
let share=getParam('share');
|
||||
if(share!=null){
|
||||
let share = getParam('share');
|
||||
if (share != null) {
|
||||
//$('#playlist').remove()
|
||||
$('#reload').remove()
|
||||
$('#next').remove()
|
||||
$('#play_share').remove()
|
||||
}
|
||||
$.get("/nas/music/getlocalhost.do",{share:share}, function (obj) {
|
||||
|
||||
$.get("/nas/music/getlocalhost.do", {share: share}, function (obj) {
|
||||
try {
|
||||
let json = JSON.parse(obj);
|
||||
if(json.code===403){
|
||||
if (json.code === 403) {
|
||||
layer.msg('您没有权限访问')
|
||||
return;
|
||||
}
|
||||
localhost = json.data ;
|
||||
localhost = json.data;
|
||||
if (localhost === 'http://null:8000' || localhost === ":8000") {
|
||||
localhost = "https://"+window.location.host;
|
||||
localhost = "https://" + window.location.host;
|
||||
}
|
||||
} catch (e) {
|
||||
localhost = ""
|
||||
|
|
@ -90,11 +94,11 @@
|
|||
let table = layui.table;
|
||||
let element = layui.element;
|
||||
let listTable = undefined;
|
||||
$.post("/public/nas/music/playlist.do",{share:share},function (json) {
|
||||
if(json.code!==0){
|
||||
$.post("/public/nas/music/playlist.do", {share: share}, function (json) {
|
||||
if (json.code !== 0) {
|
||||
return;
|
||||
}
|
||||
listTable=table.render({
|
||||
listTable = table.render({
|
||||
elem: '#playlist'
|
||||
, url: json.data //数据接口
|
||||
, method: 'post'
|
||||
|
|
@ -115,19 +119,19 @@
|
|||
, done: function (res, curr, count) {
|
||||
musicLib = res.data
|
||||
$('#musicSize').html("歌单总数:" + res.size)
|
||||
},error:function (e,data){
|
||||
}, error: function (e, data) {
|
||||
}
|
||||
})
|
||||
table.on('rowDouble(music)', function (obj) {
|
||||
//obj 同上
|
||||
if (obj.data.isdir === 1) {
|
||||
let path=obj.data.md5;
|
||||
if(path===undefined){
|
||||
path=obj.data.file;
|
||||
let path = obj.data.md5;
|
||||
if (path === undefined) {
|
||||
path = obj.data.file;
|
||||
}
|
||||
listTable.reload({
|
||||
where: {
|
||||
path:path
|
||||
path: path
|
||||
}
|
||||
, page: {
|
||||
curr: 1
|
||||
|
|
@ -149,49 +153,49 @@
|
|||
window.open(localhost + "/nas/music/play.do?token=&random=false&filePath=" + data.md5)
|
||||
}
|
||||
} else if (obj.event === 'play') {
|
||||
if(data.md5!==undefined){
|
||||
if (data.md5 !== undefined) {
|
||||
play(data)
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url:localhost + "/nas/music/list.do",
|
||||
url: localhost + "/nas/music/list.do",
|
||||
contentType: "application/json; charset=utf-8",
|
||||
data:JSON.stringify({type: true, path: data.file}),
|
||||
data: JSON.stringify({type: true, path: data.file}),
|
||||
dataType: "json",
|
||||
success:function (json){
|
||||
success: function (json) {
|
||||
try {
|
||||
if (json.code === 0) {
|
||||
playIndex = 0;
|
||||
musicLib=[]
|
||||
musicLib = []
|
||||
for (let datum of json.data) {
|
||||
if(datum.isdir===0){
|
||||
if (datum.isdir === 0) {
|
||||
musicLib.push(datum)
|
||||
}
|
||||
}
|
||||
isRandom = false;
|
||||
playNext()
|
||||
}
|
||||
}catch (e){
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}else if(obj.event==='share'){
|
||||
let isDir=false;
|
||||
let file=data.md5;
|
||||
if(data.isdir===1){
|
||||
isDir=true;
|
||||
file=data.file;
|
||||
} else if (obj.event === 'share') {
|
||||
let isDir = false;
|
||||
let file = data.md5;
|
||||
if (data.isdir === 1) {
|
||||
isDir = true;
|
||||
file = data.file;
|
||||
}
|
||||
$.post('/nas/music/share.do',{file:file,isDir:isDir},function (json){
|
||||
if(json.code===0){
|
||||
var url="http://"+window.location.host+"/html/body/nas/music.html?share="+json.data.token
|
||||
$.post('/nas/music/share.do', {file: file, isDir: isDir}, function (json) {
|
||||
if (json.code === 0) {
|
||||
var url = "http://" + window.location.host + "/html/body/nas/music.html?share=" + json.data.token
|
||||
layer.prompt({
|
||||
title:"分享链接",
|
||||
value:url
|
||||
},function (value,index,elem){
|
||||
title: "分享链接",
|
||||
value: url
|
||||
}, function (value, index, elem) {
|
||||
$('.layui-layer-input')[0].select()
|
||||
document.execCommand("Copy")
|
||||
layer.close(index);
|
||||
|
|
@ -203,17 +207,19 @@
|
|||
element.on('nav(menus)', function (elem) {
|
||||
});
|
||||
})
|
||||
function playShare(){
|
||||
$.get('/nas/music/playShare.do?share='+share,function (json) {
|
||||
|
||||
function playShare() {
|
||||
$.get('/nas/music/playShare.do?share=' + share, function (json) {
|
||||
isRandom = false;
|
||||
playIndex =0;
|
||||
playIndex = 0;
|
||||
json.data.forEach(function (item) {
|
||||
musicLib.push(item)
|
||||
})
|
||||
play(json.data[0])
|
||||
})
|
||||
}
|
||||
if(share!==null){
|
||||
|
||||
if (share !== null) {
|
||||
playShare()
|
||||
}
|
||||
});
|
||||
|
|
@ -221,6 +227,8 @@
|
|||
});
|
||||
|
||||
let player = $.AudioPlayer;
|
||||
let showLrc = false;
|
||||
let lrc = new Lyricer();
|
||||
player.init({
|
||||
container: '#audioWrap'
|
||||
, source: ''
|
||||
|
|
@ -237,6 +245,10 @@
|
|||
|
||||
}, canplayCallback: function () {
|
||||
console.log("点击播放")
|
||||
}, timeupdateCallback: function (time) {
|
||||
if (showLrc) {
|
||||
lrc.move(time)
|
||||
}
|
||||
}
|
||||
});
|
||||
$.ajax({cache: false})
|
||||
|
|
@ -244,7 +256,7 @@
|
|||
$('#footer').load("/html/footer.html");
|
||||
|
||||
$('#img').click(function () {
|
||||
if(share!==null){
|
||||
if (share !== null) {
|
||||
return;
|
||||
}
|
||||
isRandom = true;
|
||||
|
|
@ -256,14 +268,14 @@
|
|||
$('#next').click(function () {
|
||||
playNext()
|
||||
});
|
||||
$('#play_share').click(function (){
|
||||
$.post('/nas/music/share.do',{file:playNow},function (json){
|
||||
if(json.code===0){
|
||||
var url="http://"+window.location.host+"/html/body/nas/music.html?share="+json.data.token
|
||||
$('#play_share').click(function () {
|
||||
$.post('/nas/music/share.do', {file: playNow}, function (json) {
|
||||
if (json.code === 0) {
|
||||
let url = "http://" + window.location.host + "/html/body/nas/music.html?share=" + json.data.token
|
||||
layer.prompt({
|
||||
title:"分享链接",
|
||||
value:url
|
||||
},function(value,index,elem){
|
||||
title: "分享链接",
|
||||
value: url
|
||||
}, function (value, index, elem) {
|
||||
$('.layui-layer-input')[0].select()
|
||||
document.execCommand("Copy")
|
||||
layer.close(index);
|
||||
|
|
@ -271,12 +283,45 @@
|
|||
}
|
||||
})
|
||||
})
|
||||
$('#showLrc').click(function () {
|
||||
let html = '<div id="lyricer"></div>';
|
||||
$.get(localhost + '/nas/music/lrc.do?filePath=' + playNow, function (file) {
|
||||
layer.open({
|
||||
title: '歌词列表',
|
||||
area: ['400px', '600px'],
|
||||
content: html,
|
||||
shade: 0,
|
||||
offset: 'rb',
|
||||
success: function () {
|
||||
showLrc = true
|
||||
if(file===''){
|
||||
file='[00:00.00]---暂无歌词---'
|
||||
}
|
||||
lrc.setLrc(file)
|
||||
},
|
||||
end: function () {
|
||||
showLrc = false;
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
$('#reload').click(function () {
|
||||
$.post(localhost + "/nas/music/reload.do", function (obj) {
|
||||
layer.msg("提交刷新请求成功，几分钟后生效")
|
||||
})
|
||||
});
|
||||
|
||||
function updateLrc() {
|
||||
if (showLrc) {
|
||||
$.get(localhost + '/nas/music/lrc.do?filePath=' + playNow, function (file) {
|
||||
if(file===''){
|
||||
file='[00:00.00]---暂无歌词---'
|
||||
}
|
||||
lrc.setLrc(file)
|
||||
lrc.move(0)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function playNext() {
|
||||
if (isRandom) {
|
||||
|
|
@ -301,7 +346,7 @@
|
|||
if (json.code === 0) {
|
||||
playNow = json.data
|
||||
player.updateSource({
|
||||
source: localhost + "/nas/music/play.do?random=false&filePath=" + json.data
|
||||
source: localhost + "/nas/music/play.do?random=false&filePath=" + json.data
|
||||
});
|
||||
update(json.data)
|
||||
player.play()
|
||||
|
|
@ -313,8 +358,8 @@
|
|||
}
|
||||
|
||||
function play(_json) {
|
||||
let md5=''
|
||||
md5=_json.md5
|
||||
let md5 = ''
|
||||
md5 = _json.md5
|
||||
playNow = _json.md5
|
||||
player.updateSource({
|
||||
source: localhost + "/nas/music/play.do?random=false&filePath=" + md5
|
||||
|
|
@ -344,9 +389,9 @@
|
|||
title: json.data.title,
|
||||
artist: json.data.artist,
|
||||
album: json.data.album,
|
||||
artwork:[
|
||||
artwork: [
|
||||
{
|
||||
src: localhost+'/nas/music/web/image.do?fileName='+fileName,
|
||||
src: localhost + '/nas/music/web/image.do?fileName=' + fileName,
|
||||
type: 'image/png',
|
||||
sizes: '128x128'
|
||||
}
|
||||
|
|
@ -358,7 +403,8 @@
|
|||
});
|
||||
}
|
||||
})
|
||||
$('#img').attr("src",localhost+'/nas/music/web/image.do?fileName='+fileName);
|
||||
$('#img').attr("src", localhost + '/nas/music/web/image.do?fileName=' + fileName);
|
||||
updateLrc()
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -414,6 +414,7 @@
|
|||
_this.elements.totalTime.html(_this.formatTime(duration));
|
||||
}
|
||||
_this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
|
||||
_this.options.timeupdateCallback(currTime)
|
||||
}
|
||||
// Formatting a timestamp / 格式化时间戳相关
|
||||
,formatTime: function(secs, format) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,148 @@
|
|||
(function () {
|
||||
// The constrcutor can be empty or passed in the lrc string
|
||||
var Lyricer = function (options) {
|
||||
this.divID = "lyricer"; // the default html container id
|
||||
this.currentcss = "lyricer-current-line"; // this css for the line current playing
|
||||
this.lineidPrefix = "lyricer-line"; // the id prefix for each line
|
||||
this.showLines = 8; //lines showing before and after;
|
||||
this.clickable = true;
|
||||
this.clickEventName = "lyricerclick";
|
||||
if( options ) {
|
||||
for( var prop in options ) {
|
||||
if ( typeof this[prop] != "undefined" && options.hasOwnProperty(prop)) {
|
||||
this[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Lyricer.prototype.setLrc = function(rawLrc) {
|
||||
this.tags = {};
|
||||
this.lrc = [];
|
||||
this.rangeLrc = [];
|
||||
|
||||
var tagRegex = /\[([a-z]+):(.*)\].*/;
|
||||
var lrcAllRegex = /(\[[0-9.:\[\]]*\])+(.*)/;
|
||||
var timeRegex = /\[([0-9]+):([0-9.]+)\]/;
|
||||
var timeRegexGim = /\[([0-9]+):([0-9.]+)\]/g;
|
||||
var rawLrcArray = rawLrc.split(/[\r\n]/);
|
||||
for (var i = 0; i < rawLrcArray.length; i++) {
|
||||
// handle tags first
|
||||
var tag = tagRegex.exec(rawLrcArray[i]);
|
||||
if ( tag && tag[0] ) {
|
||||
this.tags[tag[1]] = tag[2];
|
||||
continue;
|
||||
}
|
||||
// handle lrc
|
||||
var lrc = lrcAllRegex.exec(rawLrcArray[i]);
|
||||
if ( lrc && lrc[0] ) {
|
||||
var times = lrc[1].replace(/\]\[/g,"],[").split(",");
|
||||
for (var j = 0; j < times.length; j++) {
|
||||
var time = timeRegex.exec(times[j]);
|
||||
if ( time && time[0] ) {
|
||||
this.lrc.push( { "starttime": parseInt(time[1],10) * 60 + parseFloat(time[2]), "line": lrc[2].replace(timeRegexGim,'') } );
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
//sort lrc array
|
||||
this.lrc.sort(function (a,b) {
|
||||
return a.starttime - b.starttime;
|
||||
});
|
||||
|
||||
// crate the range lrc array
|
||||
// dummy lines
|
||||
for (var i = 0; i < this.showLines; i++) {
|
||||
this.rangeLrc.push( { "starttime": -1, "endtime": 0, "line": " " } );
|
||||
};
|
||||
// real data
|
||||
var starttime = 0;
|
||||
var line = "";
|
||||
for (var i = 0; i < this.lrc.length; i++) {
|
||||
endtime = parseFloat(this.lrc[i].starttime);
|
||||
this.rangeLrc.push( { "starttime": starttime, "endtime": endtime, "line": line } );
|
||||
starttime = endtime;
|
||||
line = this.lrc[i].line;
|
||||
};
|
||||
this.rangeLrc.push( { "starttime": starttime, "endtime": 999.99, "line": line } );
|
||||
// dummy lines
|
||||
for (var i = 0; i < this.showLines; i++) {
|
||||
this.rangeLrc.push( { "starttime": -1, "endtime": 0, "line": " " } );
|
||||
};
|
||||
this.totalLines = this.rangeLrc.length;
|
||||
|
||||
// set html and move to start
|
||||
setHtml(this);
|
||||
this.move(0);
|
||||
};
|
||||
|
||||
var setHtml = function(self) {
|
||||
self.currentLine = 0;
|
||||
|
||||
var container = document.getElementById(self.divID);
|
||||
container.innerHTML = "";
|
||||
var ul = document.createElement("ul");
|
||||
container.appendChild(ul);
|
||||
for (var i = 0; i < self.totalLines; i++) {
|
||||
var li = document.createElement("li");
|
||||
li.innerHTML = self.rangeLrc[i].line;
|
||||
if (!li.innerHTML) {li.innerHTML=" "};
|
||||
li.setAttribute("id", self.lineidPrefix + i);
|
||||
if (self.clickable) {
|
||||
li.onclick = lineClicked(self, i);
|
||||
li.style.cursor = 'pointer';
|
||||
}
|
||||
ul.appendChild(li);
|
||||
};
|
||||
|
||||
// hide the later ones
|
||||
for (var i = self.showLines; i < self.totalLines; i++) {
|
||||
document.getElementById(self.lineidPrefix + i).style.display = "none";
|
||||
};
|
||||
};
|
||||
|
||||
var lineClicked = function(self, id) {
|
||||
return function(){
|
||||
var detail = {"time": self.rangeLrc[id].starttime};
|
||||
var e = new CustomEvent(self.clickEventName, {
|
||||
'detail': detail,
|
||||
"bubbles": true
|
||||
});
|
||||
var elem = document.getElementById(self.lineidPrefix + id);
|
||||
elem.dispatchEvent(e);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
Lyricer.prototype.move = function(time) {
|
||||
for (var i = 0; i < this.totalLines; i++) {
|
||||
if (time >= this.rangeLrc[i].starttime && time < this.rangeLrc[i].endtime) {
|
||||
this.currentLine = i;
|
||||
moveToLine(this,this.currentLine);
|
||||
return;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
var moveToLine = function (self, line) {
|
||||
var startShow = line - self.showLines;
|
||||
var endShow = line + self.showLines;
|
||||
for (var i = 0; i < self.totalLines; i++) {
|
||||
var li = document.getElementById(self.lineidPrefix + i);
|
||||
if ( i >= startShow && i <= endShow ) {
|
||||
li.style.display = "block";
|
||||
} else{
|
||||
li.style.display = "none";
|
||||
};
|
||||
if (i==line) {
|
||||
li.className = self.currentcss;
|
||||
} else {
|
||||
li.className = "";
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
window.Lyricer = Lyricer; //exposed to global
|
||||
|
||||
})();
|
||||
Loading…
Reference in New Issue