更换播放器

在文件未包含图片的情况下，寻找cover.jpg
读取元数据失败时，用文件名作为标题

web/html/body/nas/music.html

@@ -13,30 +13,22 @@
     <div id="header"></div>
     <div class="layui-body" style="left: 200px;">
         <div id="side"></div>
-        <div style="margin-left: 5%; margin-top: 5%;">
+
+        <div style="margin-left: 2%; margin-top: 2%;">
             <div>
-                <img src="/assets/defaultPlayImg.jpg" id="img" style="height: 400px; width: 400px"/>
+                <img src="/assets/defaultPlayImg.jpg" id="img" style="height: 200px; width: 200px"/>
+
                 <div style="display:inline-block;">
-                    <div>title</div>
-                    <div>by</div>
-                    <div>(0/0)</div>
-                    <video id="my-video" loop='true' class="video-js" controls preload="auto" width="500" height="400"
-                           poster="/assets/defaultPlayImg.jpg" data-setup="{}" autoplay="autoplay">
-                        <source src="/nas/music/play.do?random=true" type="video/ogg">
-                        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a
-                            web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports
-                                HTML5 video</a></p>
-                    </video>
-                </div>
-            </div>
-            <div style="margin-top: 20px;">
-                <div class="layui-col-md6 layui-col-md6">
-                    <button type="button" class="layui-icon layui-icon-play"
-                            style="width: 70px;height: 60px; font-size: 50px;"></button>
-                    <button type="button" class="layui-icon layui-icon-triangle-r"
-                            style="width: 70px;height: 60px; font-size: 50px;"></button>
+                    <div id="title">title</div>
+                    <div id="artist">by</div>
+                    <div id="album">album</div>
+                    <div id="composer">composer</div>
                 </div>
+
+                <div id="audioWrap"></div>
+
             </div>
+            <table id="playlist" lay-filter="music" ></table>
         </div>
 
         <div id="footer"></div>
@@ -45,28 +37,105 @@
 <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>
+    //let localhost="http://192.168.31.88:8000";
+    let localhost="";
+    layui.use('table', function () {
+        let table = layui.table;
+        table.render({
+            elem: '#playlist'
+            , height: 312
+            , url: localhost+'/nas/music/all.do' //数据接口
+            , 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}
+            ]]
+        })
+        table.on('rowDouble(music)', function(obj){
+            //obj 同上
+            console.log(obj.data.file) //得到当前行元素对象
+            play(obj.data.file)
+        });
+    });
     $.get("/login/check.do", function (data) {
         let json = JSON.parse(data);
         if (json.code !== 0) {
             window.location.href = "/"
         }
     })
+    let player = $.AudioPlayer;
+    player.init({
+        container: '#audioWrap'
+        , source: ''
+        , imagePath: '/assets/'
+        , debuggers: false
+        , allowSeek: true
+        , endedCallback: function () {
+            console.log('播放完成')
+            random()
+        },canplayCallback:function () {
+            console.log("点击播放")
+        }
+    });
     $.ajax({cache: false})
     $('#header').load("/html/header.html");
     $('#footer').load("/html/footer.html");
     $('#side').load("/html/body/nas/side.html");
-    $('#button').click(function () {
-        console.log("123")
-        $.get("/nas/music/image.do?fileName=QzpcXFVzZXJzXFxhZG1pblxcTXVzaWNcXDM0LeWlrui1t%2BOBruODiOODqeODs%2BODmuODg%2BODiC5mbGFj", function (data) {
+    $('#img').click(function () {
+        random()
+    });
+
+    function random() {
+        $.get(localhost+"/nas/music/random.do", function (data) {
             let json = JSON.parse(data)
             if (json.code === 1) {
-                $('#img').attr("src", "data:image/png;base64," + json.data)
+                player.updateSource({
+                    source: localhost+"/nas/music/play.do?random=false&filePath=" + json.data
+                });
+                update(json.data)
+                player.play()
+
             } else {
                 layer.msg(json.msg)
             }
         })
-    })
+    }
+    function play(file) {
+        let filePath=escape(new Base64().encode(file))
+        player.updateSource({
+            source:localhost+"/nas/music/play.do?random=false&filePath=" +filePath
+        });
+        update(filePath)
+        player.play()
+    }
+    function update(fileName) {
+        $.get(localhost+'/nas/music/find/file.do?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) {
+            let json = JSON.parse(data);
+            if (json.code === 0) {
+                layer.msg(json.msg);
+                return
+            }
+            $('#img').attr("src", "data:image/png;base64," + json.data)
+        })
+    }
 
 </script>
 <style>