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">
|
|
|
|
|
</head>
|
|
|
|
|
<link href="/css/video-js.min.css" rel="stylesheet">
|
|
|
|
|
<body>
|
|
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
|
|
<div id="header"></div>
|
2020-10-23 17:55:56 +08:00
|
|
|
|
2020-10-21 18:05:33 +08:00
|
|
|
<div class="layui-body" style="left: 200px;">
|
|
|
|
|
<div id="side"></div>
|
2020-10-21 23:25:29 +08:00
|
|
|
|
|
|
|
|
<div style="margin-left: 2%; margin-top: 2%;">
|
2020-10-21 18:05:33 +08:00
|
|
|
<div>
|
2020-10-21 23:25:29 +08:00
|
|
|
<img src="/assets/defaultPlayImg.jpg" id="img" style="height: 200px; width: 200px"/>
|
|
|
|
|
|
2020-10-21 18:05:33 +08:00
|
|
|
<div style="display:inline-block;">
|
2020-10-23 17:55:56 +08:00
|
|
|
<div id="title">标题:</div>
|
|
|
|
|
<div id="artist">艺术家:</div>
|
|
|
|
|
<div id="album">专辑:</div>
|
|
|
|
|
<div id="composer">作曲家</div>
|
2020-10-21 18:05:33 +08:00
|
|
|
</div>
|
2020-10-21 23:25:29 +08:00
|
|
|
|
|
|
|
|
<div id="audioWrap"></div>
|
|
|
|
|
|
2020-10-21 18:05:33 +08:00
|
|
|
</div>
|
2020-10-23 17:55:56 +08:00
|
|
|
<ul class="layui-nav layui-bg-cyan" lay-filter="menus" style="margin-right: 10px;">
|
|
|
|
|
<div style="margin-top: 10px;">
|
|
|
|
|
<span id="menu" class="layui-breadcrumb" lay-separator="/"
|
|
|
|
|
style="visibility: visible;">
|
|
|
|
|
<a href="javascript:onMenuClick('root');">主目录</a>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</ul>
|
|
|
|
|
<table id="playlist" lay-filter="music"></table>
|
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/video.min.js"></script>
|
2020-10-21 23:25:29 +08:00
|
|
|
<script src="/js/myjs.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="/css/AudioPlayer.css">
|
|
|
|
|
<script src="/js/AudioPlayer.js"></script>
|
2020-10-21 18:05:33 +08:00
|
|
|
<script>
|
2020-10-21 23:25:29 +08:00
|
|
|
//let localhost="http://192.168.31.88:8000";
|
2020-10-23 17:55:56 +08:00
|
|
|
let localhost = "";
|
|
|
|
|
layui.use(['table', 'element'], function () {
|
2020-10-21 23:25:29 +08:00
|
|
|
let table = layui.table;
|
2020-10-23 17:55:56 +08:00
|
|
|
let element = layui.element;
|
2020-10-21 23:25:29 +08:00
|
|
|
table.render({
|
|
|
|
|
elem: '#playlist'
|
|
|
|
|
, height: 312
|
2020-10-23 17:55:56 +08:00
|
|
|
, url: localhost + '/nas/music/all.do' //数据接口
|
2020-10-21 23:25:29 +08:00
|
|
|
, page: true //开启分页
|
|
|
|
|
, cols: [[
|
|
|
|
|
{field: 'title', title: '标题', width: 400}
|
|
|
|
|
, {field: 'artist', title: '艺术家', width: 200}
|
|
|
|
|
, {field: 'album', title: '专辑', width: 200}
|
|
|
|
|
, {field: 'composer', title: '作曲', width: 200}
|
|
|
|
|
, {field: 'track', title: '音轨号', width: 100}
|
|
|
|
|
]]
|
|
|
|
|
})
|
2020-10-23 17:55:56 +08:00
|
|
|
table.on('rowDouble(music)', function (obj) {
|
2020-10-21 23:25:29 +08:00
|
|
|
//obj 同上
|
|
|
|
|
console.log(obj.data.file) //得到当前行元素对象
|
|
|
|
|
play(obj.data.file)
|
|
|
|
|
});
|
2020-10-23 17:55:56 +08:00
|
|
|
element.on('nav(menus)', function (elem) {
|
|
|
|
|
console.log(elem); //得到当前点击的DOM对象
|
|
|
|
|
});
|
2020-10-21 23:25:29 +08:00
|
|
|
});
|
2020-10-23 17:55:56 +08:00
|
|
|
|
2020-10-21 18:05:33 +08:00
|
|
|
$.get("/login/check.do", function (data) {
|
|
|
|
|
let json = JSON.parse(data);
|
|
|
|
|
if (json.code !== 0) {
|
|
|
|
|
window.location.href = "/"
|
|
|
|
|
}
|
|
|
|
|
})
|
2020-10-21 23:25:29 +08:00
|
|
|
let player = $.AudioPlayer;
|
|
|
|
|
player.init({
|
|
|
|
|
container: '#audioWrap'
|
|
|
|
|
, source: ''
|
|
|
|
|
, imagePath: '/assets/'
|
|
|
|
|
, debuggers: false
|
|
|
|
|
, allowSeek: true
|
|
|
|
|
, endedCallback: function () {
|
|
|
|
|
console.log('播放完成')
|
|
|
|
|
random()
|
2020-10-23 17:55:56 +08:00
|
|
|
}, canplayCallback: function () {
|
2020-10-21 23:25:29 +08:00
|
|
|
console.log("点击播放")
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-10-21 18:05:33 +08:00
|
|
|
$.ajax({cache: false})
|
|
|
|
|
$('#header').load("/html/header.html");
|
|
|
|
|
$('#footer').load("/html/footer.html");
|
|
|
|
|
$('#side').load("/html/body/nas/side.html");
|
2020-10-21 23:25:29 +08:00
|
|
|
$('#img').click(function () {
|
|
|
|
|
random()
|
|
|
|
|
});
|
|
|
|
|
|
2020-10-23 17:55:56 +08:00
|
|
|
function onMenuClick(that) {
|
|
|
|
|
console.log(that)
|
|
|
|
|
}
|
|
|
|
|
|
2020-10-21 23:25:29 +08:00
|
|
|
function random() {
|
2020-10-23 17:55:56 +08:00
|
|
|
$.get(localhost + "/nas/music/random.do", function (data) {
|
2020-10-21 18:05:33 +08:00
|
|
|
let json = JSON.parse(data)
|
|
|
|
|
if (json.code === 1) {
|
2020-10-21 23:25:29 +08:00
|
|
|
player.updateSource({
|
2020-10-23 17:55:56 +08:00
|
|
|
source: localhost + "/nas/music/play.do?random=false&filePath=" + json.data
|
2020-10-21 23:25:29 +08:00
|
|
|
});
|
|
|
|
|
update(json.data)
|
|
|
|
|
player.play()
|
|
|
|
|
|
2020-10-21 18:05:33 +08:00
|
|
|
} else {
|
|
|
|
|
layer.msg(json.msg)
|
|
|
|
|
}
|
|
|
|
|
})
|
2020-10-21 23:25:29 +08:00
|
|
|
}
|
2020-10-23 17:55:56 +08:00
|
|
|
|
2020-10-21 23:25:29 +08:00
|
|
|
function play(file) {
|
2020-10-23 17:55:56 +08:00
|
|
|
let filePath = escape(new Base64().encode(file))
|
2020-10-21 23:25:29 +08:00
|
|
|
player.updateSource({
|
2020-10-23 17:55:56 +08:00
|
|
|
source: localhost + "/nas/music/play.do?random=false&filePath=" + filePath
|
2020-10-21 23:25:29 +08:00
|
|
|
});
|
|
|
|
|
update(filePath)
|
|
|
|
|
player.play()
|
|
|
|
|
}
|
2020-10-23 17:55:56 +08:00
|
|
|
|
2020-10-21 23:25:29 +08:00
|
|
|
function update(fileName) {
|
2020-10-23 17:55:56 +08:00
|
|
|
$.get(localhost + '/nas/music/find/file.do?path=' + fileName, function (data) {
|
2020-10-21 23:25:29 +08:00
|
|
|
let json = JSON.parse(data);
|
|
|
|
|
if (json.code === 0) {
|
|
|
|
|
layer.msg(json.msg);
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
$('#title').html("标题:" + json.data.title)
|
|
|
|
|
$('#artist').html("艺术家:" + json.data.artist)
|
|
|
|
|
$('#album').html("专辑:" + json.data.album)
|
|
|
|
|
$('#composer').html("作曲:" + json.data.composer)
|
|
|
|
|
})
|
2020-10-23 17:55:56 +08:00
|
|
|
$.get(localhost + "/nas/music/image.do?fileName=" + fileName, function (data) {
|
2020-10-21 23:25:29 +08:00
|
|
|
let json = JSON.parse(data);
|
|
|
|
|
if (json.code === 0) {
|
|
|
|
|
layer.msg(json.msg);
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
$('#img').attr("src", "data:image/png;base64," + json.data)
|
|
|
|
|
})
|
|
|
|
|
}
|
2020-10-21 18:05:33 +08:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
