web_toolset/web/html/body/nas/music.html

436 lines
16 KiB
HTML
Raw Normal View History

2020-10-21 18:05:33 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>来点Music~</title>
<link rel="stylesheet" href="/layui/css/layui.css">
2022-07-10 23:40:01 +08:00
<link rel="stylesheet" href="/css/lyricer.min.css">
2020-10-21 18:05:33 +08:00
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div id="header"></div>
2020-10-23 17:55:56 +08:00
<div class="layui-body mybody body2">
2022-07-10 23:40:01 +08:00
<!-- <div id="side"></div>-->
<div style="margin-left: 2%; margin-top: 2%;">
2020-10-21 18:05:33 +08:00
<div>
2022-07-10 23:40:01 +08:00
<img src="/assets/defaultPlayImg.jpg" id="img" style="height: 300px; width: 300px"/>
2022-07-10 23:40:01 +08:00
<div style="top: 800px;display:inline-block;">
2020-10-29 09:58:43 +08:00
<div id="musicSize">歌单总数:</div>
<div id="playerNowList">播放列表:</div>
2020-10-23 17:55:56 +08:00
<div id="title">标题:</div>
<div id="artist">艺术家:</div>
<div id="album">专辑:</div>
<div id="composer">作曲家</div>
2022-11-14 14:11:18 +08:00
<form class="layui-form" lay-filter="calendarForm">
2022-11-14 14:27:28 +08:00
<div class="layui-row layui-col-space12">
<div class="layui-col-xs3 ">
<a class="layui-btn layui-btn-normal" id="download">下载</a>
</div>
<div class="layui-col-xs3 ">
<a class="layui-btn layui-btn-normal" id="next">下一首</a>
</div>
<div class="layui-col-xs3 ">
<a class="layui-btn layui-btn-normal" id="play_share">分享</a>
</div>
<div class="layui-col-xs3 ">
<a class="layui-btn layui-btn-normal" id="showLrc">显示歌词</a>
</div>
</div>
<div class="layui-row layui-col-space5">
<div class="layui-col-xs2 ">
<input type="checkbox" name="" title="过滤instrumental" checked id="filter_instrumental">
</div>
</div>
2022-11-14 14:11:18 +08:00
</form>
2020-10-21 18:05:33 +08:00
</div>
<div id="audioWrap"></div>
2020-10-21 18:05:33 +08:00
</div>
2020-10-23 17:55:56 +08:00
<table id="playlist" lay-filter="music"></table>
<a class="layui-btn layui-btn-normal" id="reload">刷新曲库</a>
2020-10-21 18:05:33 +08:00
</div>
<div id="footer"></div>
</div>
2020-10-23 17:55:56 +08:00
2020-10-21 18:05:33 +08:00
</div>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/myjs.js"></script>
2022-07-10 23:40:01 +08:00
<script src="/js/lyricer.min.js"></script>
<link rel="stylesheet" href="/css/AudioPlayer.css">
<script src="/js/AudioPlayer.js"></script>
<script id="listTemplet">
{{# if(d.isdir===1){ }}
<div><i class="layui-icon">&#xe656; </i>{{d.title}}</div>
{{# } else { }}
<div><i class="layui-icon">&#xe6fc; </i>{{d.title}}</div>
{{# } }}
</script>
<script type="text/html" id="music">
<a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
<a class="layui-btn layui-btn-xs" lay-event="play">播放</a>
<a class="layui-btn layui-btn-xs" lay-event="share">分享</a>
</script>
2020-10-21 18:05:33 +08:00
<script>
2020-10-23 17:55:56 +08:00
let localhost = "";
let musicLib = []
let isRandom = true;
let playIndex = 0;
let playNow = ""
2022-07-10 23:40:01 +08:00
let share = getParam('share');
if (share != null) {
//$('#playlist').remove()
$('#reload').remove()
$('#next').remove()
$('#play_share').remove()
}
2022-07-10 23:40:01 +08:00
$.get("/nas/music/getlocalhost.do", {share: share}, function (obj) {
try {
let json = JSON.parse(obj);
2022-07-10 23:40:01 +08:00
if (json.code === 403) {
layer.msg('您没有权限访问')
return;
}
2022-07-10 23:40:01 +08:00
localhost = json.data;
2020-12-04 14:09:12 +08:00
if (localhost === 'http://null:8000' || localhost === ":8000") {
2022-07-10 23:40:01 +08:00
localhost = "https://" + window.location.host;
}
} catch (e) {
localhost = ""
console.log(e)
}
layui.use(['table', 'element'], function () {
let table = layui.table;
let element = layui.element;
let listTable = undefined;
2022-07-10 23:40:01 +08:00
$.post("/public/nas/music/playlist.do", {share: share}, function (json) {
if (json.code !== 0) {
return;
2020-12-04 14:09:12 +08:00
}
2022-07-10 23:40:01 +08:00
listTable = table.render({
elem: '#playlist'
, url: json.data //数据接口
, method: 'post'
, where: {
path: 'root',
type: false
}
, contentType: 'application/json'
, page: true //开启分页
, cols: [[
{field: 'title', title: '标题', width: 400, sort: true, templet: "#listTemplet"}
, {field: 'artist', title: '艺术家', width: 200}
, {field: 'album', title: '专辑', width: 200}
, {field: 'composer', title: '作曲', width: 150}
, {field: 'track', title: '音轨号', width: 100, sort: true}
, {field: "right", width: 200, toolbar: '#music'}
]]
, done: function (res, curr, count) {
musicLib = res.data
$('#musicSize').html("歌单总数:" + res.size)
2022-07-10 23:40:01 +08:00
}, error: function (e, data) {
}
})
table.on('rowDouble(music)', function (obj) {
//obj 同上
if (obj.data.isdir === 1) {
2022-07-10 23:40:01 +08:00
let path = obj.data.md5;
if (path === undefined) {
path = obj.data.file;
}
listTable.reload({
where: {
2022-11-14 14:11:18 +08:00
path: path,
filter:$('#filter_instrumental')[0].checked
}
, page: {
curr: 1
}
});
} else {
isRandom = false;
playIndex = obj.tr[0].dataset.index;
play(obj.data)
}
});
table.on('tool(music)', function (obj) {
let data = obj.data;
if (obj.event === 'download') {
if (data.isdir === 0) {
window.open(localhost + "/nas/music/play.do?token=&random=false&filePath=" + data.md5)
}
} else if (obj.event === 'play') {
2022-07-10 23:40:01 +08:00
if (data.md5 !== undefined) {
play(data)
return;
}
$.ajax({
type: "POST",
2022-07-10 23:40:01 +08:00
url: localhost + "/nas/music/list.do",
contentType: "application/json; charset=utf-8",
2022-11-14 14:11:18 +08:00
data: JSON.stringify({type: true, path: data.file,filter:$('#filter_instrumental')[0].checked}),
dataType: "json",
2022-07-10 23:40:01 +08:00
success: function (json) {
try {
if (json.code === 0) {
playIndex = 0;
2022-07-10 23:40:01 +08:00
musicLib = []
for (let datum of json.data) {
2022-07-10 23:40:01 +08:00
if (datum.isdir === 0) {
musicLib.push(datum)
}
}
isRandom = false;
playNext()
}
2022-07-10 23:40:01 +08:00
} catch (e) {
}
}
})
2022-07-10 23:40:01 +08:00
} else if (obj.event === 'share') {
let isDir = false;
let file = data.md5;
if (data.isdir === 1) {
isDir = true;
file = data.file;
}
2022-07-10 23:40:01 +08:00
$.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({
2022-07-10 23:40:01 +08:00
title: "分享链接",
value: url
}, function (value, index, elem) {
2022-03-28 19:09:51 +08:00
$('.layui-layer-input')[0].select()
document.execCommand("Copy")
layer.close(index);
})
}
})
}
});
element.on('nav(menus)', function (elem) {
});
})
2022-07-10 23:40:01 +08:00
function playShare() {
$.get('/nas/music/playShare.do?share=' + share, function (json) {
isRandom = false;
2022-07-10 23:40:01 +08:00
playIndex = 0;
json.data.forEach(function (item) {
musicLib.push(item)
})
play(json.data[0])
})
}
2022-07-10 23:40:01 +08:00
if (share !== null) {
playShare()
}
2020-10-23 17:55:56 +08:00
});
});
let player = $.AudioPlayer;
2022-07-10 23:40:01 +08:00
let showLrc = false;
let lrc = new Lyricer();
player.init({
container: '#audioWrap'
, source: ''
2020-12-04 14:09:12 +08:00
, imagePath: '/assets'
, debuggers: false
, allowSeek: true
, endedCallback: function () {
console.log('播放完成')
if (isRandom) {
random()
} else {
playNext()
}
2020-10-23 17:55:56 +08:00
}, canplayCallback: function () {
console.log("点击播放")
2022-07-10 23:40:01 +08:00
}, timeupdateCallback: function (time) {
if (showLrc) {
lrc.move(time)
}
}
});
2020-10-21 18:05:33 +08:00
$.ajax({cache: false})
$('#header').load("/html/header.html");
$('#footer').load("/html/footer.html");
$('#img').click(function () {
2022-07-10 23:40:01 +08:00
if (share !== null) {
return;
}
isRandom = true;
random()
});
$('#download').click(function () {
window.open(localhost + "/nas/music/play.do?token=&random=false&filePath=" + playNow)
});
2020-12-04 14:09:12 +08:00
$('#next').click(function () {
playNext()
});
2022-07-10 23:40:01 +08:00
$('#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({
2022-07-10 23:40:01 +08:00
title: "分享链接",
value: url
}, function (value, index, elem) {
2022-03-28 19:09:51 +08:00
$('.layui-layer-input')[0].select()
document.execCommand("Copy")
layer.close(index);
})
}
})
})
2022-07-10 23:40:01 +08:00
$('#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;
}
});
})
})
2020-12-04 14:09:12 +08:00
$('#reload').click(function () {
$.post(localhost + "/nas/music/reload.do", function (obj) {
2020-10-29 10:01:03 +08:00
layer.msg("提交刷新请求成功,几分钟后生效")
})
});
2022-07-10 23:40:01 +08:00
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() {
2020-12-04 14:09:12 +08:00
if (isRandom) {
random()
2020-12-04 14:09:12 +08:00
return;
}
if (playIndex === musicLib.length) {
playIndex = 0;
}
2020-12-04 14:09:12 +08:00
if (musicLib[playIndex].isdir === 1) {
playIndex++
playNext()
} else {
play(musicLib[playIndex]);
playIndex++
}
2020-10-23 17:55:56 +08:00
}
function random() {
2020-12-04 14:09:12 +08:00
$.post(localhost + "/nas/music/random.do", function (data) {
2020-10-21 18:05:33 +08:00
let json = JSON.parse(data)
if (json.code === 0) {
playNow = json.data
player.updateSource({
2022-07-10 23:40:01 +08:00
source: localhost + "/nas/music/play.do?random=false&filePath=" + json.data
});
update(json.data)
player.play()
2020-10-21 18:05:33 +08:00
} else {
layer.msg(json.msg)
}
})
}
2020-10-23 17:55:56 +08:00
function play(_json) {
2022-07-10 23:40:01 +08:00
let md5 = ''
md5 = _json.md5
playNow = _json.md5
player.updateSource({
source: localhost + "/nas/music/play.do?random=false&filePath=" + md5
});
update(md5)
player.play()
}
2020-10-23 17:55:56 +08:00
function update(fileName) {
2020-12-04 14:09:12 +08:00
$.ajax({
type: 'post'
, url: localhost + '/nas/music/find/file.do'
, contentType: "application/json"
, data: JSON.stringify({"path": fileName})
, success: function (data) {
let json = JSON.parse(data);
if (isRandom) {
$('#playerNowList').html("播放列表: (全列表随机播放)")
} else {
$('#playerNowList').html("播放列表: (" + playIndex + "/" + musicLib.length + ")")
}
$('#title').html("标题:" + json.data.title)
$('#artist').html("艺术家:" + json.data.artist)
$('#album').html("专辑:" + json.data.album)
$('#composer').html("作曲:" + json.data.composer)
navigator.mediaSession.metadata = new MediaMetadata({
title: json.data.title,
artist: json.data.artist,
album: json.data.album,
2022-07-10 23:40:01 +08:00
artwork: [
2020-12-04 14:09:12 +08:00
{
2022-07-10 23:40:01 +08:00
src: localhost + '/nas/music/web/image.do?fileName=' + fileName,
2020-12-04 14:09:12 +08:00
type: 'image/png',
sizes: '128x128'
}
]
});
navigator.mediaSession.setActionHandler('nexttrack', function () {
// 用户点击了“下一首”媒体通知图标
playNext();
});
}
})
2022-07-10 23:40:01 +08:00
$('#img').attr("src", localhost + '/nas/music/web/image.do?fileName=' + fileName);
updateLrc()
}
2020-10-21 18:05:33 +08:00
</script>
<style>
</style>
</body>
</html>