JavaWeb/web_toolset
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
806b257e81
web_toolset/web/html/body/nas/music.html

246 lines
8.3 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">
</head>
<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>
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
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>
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
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-26 18:32:35 +08:00
<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>
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
<a class="layui-btn layui-btn-normal" id="download">下载</a>
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
<a class="layui-btn layui-btn-normal" id="next">下一首</a>
开始整音乐播放器
2020-10-21 18:05:33 +08:00
</div>
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
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
<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>
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
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>
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
<script id="listTemplet">
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
{{# if(d.dir){ }}
<div><i class="layui-icon">&#xe656; </i>{{d.title}}</div>
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
{{# } else { }}
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
<div><i class="layui-icon">&#xe6fc; </i>{{d.title}}</div>
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
{{# } }}
</script>
<script type="text/html" id="music">
<a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
<a class="layui-btn layui-btn-xs" lay-event="play">播放</a>
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
</script>
开始整音乐播放器
2020-10-21 18:05:33 +08:00
<script>
更换元数据读取库
2020-10-23 17:55:56 +08:00
let localhost = "";
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
let musicLib = []
let isRandom = true;
let playIndex = 0;
let playNow = ""
$.get("/nas/music/getlocalhost.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk", function (obj) {
try {
let json = JSON.parse(obj);
localhost = json.data+":8000";
if(localhost==='http://null:8000'){
localhost=""
}
} catch (e) {
localhost = ""
}
console.log(localhost)
// localhost="http://116.22.200.20:8000"
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
layui.use(['table', 'element'], function () {
let table = layui.table;
let element = layui.element;
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
let listTable = table.render({
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
elem: '#playlist'
, url: localhost + '/nas/music/list.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk' //数据接口
, page: true //开启分页
, cols: [[
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
{field: 'title', title: '标题', width: 400, templet: "#listTemplet"}
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
, {field: 'artist', title: '艺术家', width: 200}
, {field: 'album', title: '专辑', width: 200}
, {field: 'composer', title: '作曲', width: 200}
, {field: 'track', title: '音轨号', width: 100}
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
, {field: "right", width: 150, toolbar: '#music'}
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
]]
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
, done: function (res, curr, count) {
musicLib = res.data
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
}
})
table.on('rowDouble(music)', function (obj) {
//obj 同上
console.log(obj.data) //得到当前行元素对象
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
if (obj.data.dir) {
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
listTable.reload({
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
where: {
path: obj.data.file
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
}
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
, page: {
curr: 1
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
}
});
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
} else {
isRandom = false;
playIndex = obj.tr[0].dataset.index;
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
play(obj.data.file)
}
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
});
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
table.on('tool(music)', function (obj) {
let data = obj.data;
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
if (obj.event === 'download') {
if (!data.dir) {
window.open(localhost + "/nas/music/play.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk&random=false&filePath=" + new Base64().encode(data.file))
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
}
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
} else if (obj.event === 'play') {
console.log(data.file)
$.get(localhost + "/nas/music/list.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk&path=" + new Base64().encode(data.file), function (obj) {
let json = JSON.parse(obj);
console.log(json)
if(json.code===0){
playIndex=0;
musicLib=json.data;
isRandom=false;
playNext()
}
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
})
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
}
});
element.on('nav(menus)', function (elem) {
console.log(elem); //得到当前点击的DOM对象
});
更换元数据读取库
2020-10-23 17:55:56 +08:00
});
开始整音乐播放器
2020-10-21 18:05:33 +08:00
})
音乐播放器界面暴露到header.html 音乐播放器界面不需要登录即可使用
2020-10-26 17:11:23 +08:00
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
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('播放完成')
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
if (isRandom) {
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
random()
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
} else {
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
playNext()
}
更换元数据读取库
2020-10-23 17:55:56 +08:00
}, canplayCallback: function () {
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
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");
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
$('#img').click(function () {
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
isRandom = true;
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
random()
});
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
$('#download').click(function () {
window.open(localhost + "/nas/music/play.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk&random=false&filePath=" + playNow)
})
$('#next').click(function (){
playNext()
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
})
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
function playNext() {
if(isRandom){
random()
return ;
}
if (playIndex === musicLib.length) {
playIndex = 0;
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
}
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
if (musicLib[playIndex].dir) {
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
playIndex++
playNext()
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
} else {
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
play(musicLib[playIndex].file);
playIndex++
}
更换元数据读取库
2020-10-23 17:55:56 +08:00
}
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
function random() {
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
$.get(localhost + "/nas/music/random.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk", function (data) {
开始整音乐播放器
2020-10-21 18:05:33 +08:00
let json = JSON.parse(data)
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
if (json.code === 0) {
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
playNow = json.data
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
player.updateSource({
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
source: localhost + "/nas/music/play.do?random=false&filePath=" + json.data + "&token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk"
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
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)
}
})
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
}
更换元数据读取库
2020-10-23 17:55:56 +08:00
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
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-26 18:32:35 +08:00
playNow = filePath
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
player.updateSource({
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
source: localhost + "/nas/music/play.do?random=false&filePath=" + filePath + "&token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk"
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
});
update(filePath)
player.play()
}
更换元数据读取库
2020-10-23 17:55:56 +08:00
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
function update(fileName) {
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
$.get(localhost + '/nas/music/find/file.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk&path=' + fileName, function (data) {
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
let json = JSON.parse(data);
新增播放整个文件夹功能 新增下一首功能
2020-10-26 18:32:35 +08:00
if(isRandom){
$('#playerNowList').html("播放列表: (全列表随机播放)")
}else{
$('#playerNowList').html("播放列表: (" + playIndex+"/"+musicLib.length+")")
}
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
$('#title').html("标题:" + json.data.title)
$('#artist').html("艺术家:" + json.data.artist)
$('#album').html("专辑:" + json.data.album)
$('#composer').html("作曲:" + json.data.composer)
})
api token新增权限控制 音乐界面新增下载按钮 音乐列表新增返回功能 新增音乐文件夹功能 新增在文件夹内双击播放则按顺序播放当前文件夹内的歌 新增音乐文件夹列表的图标
2020-10-26 16:50:16 +08:00
$.get(localhost + "/nas/music/image.do?token=PlVodzYhvxRQbOHKakpKs2dvnoc43Cnk&fileName=" + fileName, function (data) {
更换播放器 在文件未包含图片的情况下，寻找cover.jpg 读取元数据失败时，用文件名作为标题
2020-10-21 23:25:29 +08:00
let json = JSON.parse(data);
$('#img').attr("src", "data:image/png;base64," + json.data)
})
}
开始整音乐播放器
2020-10-21 18:05:33 +08:00
</script>
<style>
</style>
</body>
</html>
Reference in New Issue Copy Permalink