JavaWeb/web_toolset
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

api token新增权限控制

Browse Source 
音乐界面新增下载按钮
音乐列表新增返回功能
新增音乐文件夹功能
新增在文件夹内双击播放则按顺序播放当前文件夹内的歌
新增音乐文件夹列表的图标
This commit is contained in:
yutou
2020-10-26 16:50:16 +08:00
parent 180346963c
commit 3d60754263
17 changed files with 953 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
web/html/body/nas/music.html
View File

@@ -24,19 +24,12 @@
<div id="artist">艺术家:</div>
<div id="album">专辑:</div>
<div id="composer">作曲家</div>
<a class="layui-btn layui-btn-normal" id="download">下载</a>
</div>
<div id="audioWrap"></div>
</div>
<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>
</div>
@@ -46,33 +39,78 @@
</div>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/video.min.js"></script>
<script src="/js/myjs.js"></script>
<link rel="stylesheet" href="/css/AudioPlayer.css">
<script src="/js/AudioPlayer.js"></script>
<script id="listTemplet">
{{# if(d.dir){ }}
<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>
</script>
<script>
//let localhost="http://192.168.31.88:8000";
let localhost = "";
let musicLib=[]
let isRandom=true;
let playIndex=0;
let playNow=""
$.get("/nas/music/getlocalhost.do",function (obj){
/* let json=JSON.parse(obj);
localhost=json.data;*/
// localhost="http://116.22.200.20:8000"
})
layui.use(['table', 'element'], function () {
let table = layui.table;
let element = layui.element;
table.render({
let listTable=table.render({
elem: '#playlist'
, height: 312
, url: localhost + '/nas/music/all.do' //数据接口
, url: localhost + '/nas/music/list.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk' //数据接口
, page: true //开启分页
, cols: [[
{field: 'title', title: '标题', width: 400}
{field: 'title', title: '标题', width: 400,templet:"#listTemplet"}
, {field: 'artist', title: '艺术家', width: 200}
, {field: 'album', title: '专辑', width: 200}
, {field: 'composer', title: '作曲', width: 200}
, {field: 'track', title: '音轨号', width: 100}
, {field: "right", width: 100, toolbar: '#music'}
]]
,done:function (res,curr,count){
musicLib=res.data
}
})
table.on('rowDouble(music)', function (obj) {
//obj 同上
console.log(obj.data.file) //得到当前行元素对象
play(obj.data.file)
console.log(obj.data) //得到当前行元素对象
if(obj.data.dir){
listTable.reload({
where:{
path:obj.data.file
}
,page:{
curr:1
}
});
}else{
isRandom=false;
playIndex=obj.tr[0].dataset.index;
play(obj.data.file)
}
});
table.on('tool(music)', function (obj) {
let data = obj.data;
if(obj.event === 'download'){
if(!data.dir){
window.open(localhost+"/nas/music/play.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk&random=false&filePath="+new Base64().encode(data.file))
}
}
});
element.on('nav(menus)', function (elem) {
console.log(elem); //得到当前点击的DOM对象
@@ -94,7 +132,12 @@
, allowSeek: true
, endedCallback: function () {
console.log('播放完成')
random()
if(isRandom){
random()
}else{
playNext()
}
}, canplayCallback: function () {
console.log("点击播放")
}
@@ -104,19 +147,34 @@
$('#footer').load("/html/footer.html");
$('#side').load("/html/body/nas/side.html");
$('#img').click(function () {
isRandom=true;
random()
});
$('#download').click(function (){
window.open(localhost+"/nas/music/play.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk&random=false&filePath="+playNow)
})
function onMenuClick(that) {
console.log(that)
function playNext(){
if(playIndex===musicLib.length){
playIndex=0;
}
if(musicLib[playIndex].dir){
playIndex++
playNext()
}else{
play(musicLib[playIndex].file);
playIndex++
}
}
function random() {
$.get(localhost + "/nas/music/random.do", function (data) {
$.get(localhost + "/nas/music/random.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk", function (data) {
let json = JSON.parse(data)
if (json.code === 1) {
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+"&token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk"
});
update(json.data)
player.play()
@@ -129,31 +187,24 @@
function play(file) {
let filePath = escape(new Base64().encode(file))
playNow=filePath
player.updateSource({
source: localhost + "/nas/music/play.do?random=false&filePath=" + filePath
source: localhost + "/nas/music/play.do?random=false&filePath=" + filePath+"&token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk"
});
update(filePath)
player.play()
}
function update(fileName) {
$.get(localhost + '/nas/music/find/file.do?path=' + fileName, function (data) {
$.get(localhost + '/nas/music/find/file.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk&path=' + fileName, function (data) {
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)
})
$.get(localhost + "/nas/music/image.do?fileName=" + fileName, function (data) {
$.get(localhost + "/nas/music/image.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk&fileName=" + fileName, function (data) {
let json = JSON.parse(data);
if (json.code === 0) {
layer.msg(json.msg);
return
}
$('#img').attr("src", "data:image/png;base64," + json.data)
})
}