add:新增歌词功能

2022-07-10 23:40:01 +08:00 · 2022-07-10 23:40:01 +08:00 · fefcfe6c35
commit fefcfe6c35
parent f57325c327
4 changed files with 276 additions and 54 deletions
--- a/web/css/lyricer.min.css
+++ b/web/css/lyricer.min.css
@ -0,0 +1,27 @@
+#lyricer {
+    font-size: 100%;
+    font-family: "Microsoft YaHei","Hiragino Sans GB W3",Tahoma,Arial;
+    text-shadow: 0 0 1px #EEEEEE;
+    color: #666666;
+    overflow: hidden;
+}
+
+#lyricer ul {
+    list-style-type: none;
+    padding: 5px;
+    margin-left: 50px;
+}
+
+#lyricer ul li {
+    overflow: auto;
+}
+
+#lyricer ul li:hover {
+    color: #428bca;
+}
+
+#lyricer .lyricer-current-line {
+    color: #fff;
+    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #ff2d95, 0 0 6px #ff2d95, 0 0 8px #ff2d95, 0 0 10px #ff2d95, 0 0 12px #ff2d95;
+    padding:10px
+}
--- a/web/html/body/nas/music.html
+++ b/web/html/body/nas/music.html
@ -6,6 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>来点Music~</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
+    <link rel="stylesheet" href="/css/lyricer.min.css">
 </head>
 <body>
 <div class="layui-layout layui-layout-admin">
@ -16,9 +17,9 @@

        <div style="margin-left: 2%; margin-top: 2%;">
            <div>
-                <img src="/assets/defaultPlayImg.jpg" id="img" style="height: 200px; width: 200px"/>
+                <img src="/assets/defaultPlayImg.jpg" id="img" style="height: 300px; width: 300px"/>

-                <div style="display:inline-block;">
+                <div style="top: 800px;display:inline-block;">
                    <div id="musicSize">歌单总数:</div>
                    <div id="playerNowList">播放列表:</div>
                    <div id="title">标题:</div>
@ -28,6 +29,7 @@
                    <a class="layui-btn layui-btn-normal" id="download">下载</a>
                    <a class="layui-btn layui-btn-normal" id="next">下一首</a>
                    <a class="layui-btn layui-btn-normal" id="play_share">分享</a>
+                    <a class="layui-btn layui-btn-normal" id="showLrc">显示歌词</a>
                </div>

                <div id="audioWrap"></div>
@ -44,6 +46,7 @@
 <script src="/layui/layui.js"></script>
 <script src="/js/jquery-3.2.1.js"></script>
 <script src="/js/myjs.js"></script>
+<script src="/js/lyricer.min.js"></script>
 <link rel="stylesheet" href="/css/AudioPlayer.css">
 <script src="/js/AudioPlayer.js"></script>
 <script id="listTemplet">
@ -71,6 +74,7 @@
        $('#next').remove()
        $('#play_share').remove()
    }
+
    $.get("/nas/music/getlocalhost.do", {share: share}, function (obj) {
        try {
            let json = JSON.parse(obj);
@ -203,6 +207,7 @@
                element.on('nav(menus)', function (elem) {
                });
            })
+
            function playShare() {
                $.get('/nas/music/playShare.do?share=' + share, function (json) {
                    isRandom = false;
@ -213,6 +218,7 @@
                    play(json.data[0])
                })
            }
+
            if (share !== null) {
                playShare()
            }
@ -221,6 +227,8 @@
    });

    let player = $.AudioPlayer;
+    let showLrc = false;
+    let lrc = new Lyricer();
    player.init({
        container: '#audioWrap'
        , source: ''
@ -237,6 +245,10 @@

        }, canplayCallback: function () {
            console.log("点击播放")
+        }, timeupdateCallback: function (time) {
+            if (showLrc) {
+                lrc.move(time)
+            }
        }
    });
    $.ajax({cache: false})
@ -259,7 +271,7 @@
    $('#play_share').click(function () {
        $.post('/nas/music/share.do', {file: playNow}, function (json) {
            if (json.code === 0) {
-                var url="http://"+window.location.host+"/html/body/nas/music.html?share="+json.data.token
+                let url = "http://" + window.location.host + "/html/body/nas/music.html?share=" + json.data.token
                layer.prompt({
                    title: "分享链接",
                    value: url
@ -271,12 +283,45 @@
            }
        })
    })
+    $('#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;
+                }
+            });
+        })
+    })
    $('#reload').click(function () {
        $.post(localhost + "/nas/music/reload.do", function (obj) {
            layer.msg("提交刷新请求成功，几分钟后生效")
        })
    });

+    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() {
        if (isRandom) {
@ -359,6 +404,7 @@
            }
        })
        $('#img').attr("src", localhost + '/nas/music/web/image.do?fileName=' + fileName);
+        updateLrc()
    }


--- a/web/js/AudioPlayer.js
+++ b/web/js/AudioPlayer.js
@ -414,6 +414,7 @@
                _this.elements.totalTime.html(_this.formatTime(duration));
            }
            _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
+            _this.options.timeupdateCallback(currTime)
        }
        // Formatting a timestamp / 格式化时间戳相关
        ,formatTime: function(secs, format) {
--- a/web/js/lyricer.min.js
+++ b/web/js/lyricer.min.js
@ -0,0 +1,148 @@
+(function () {
+    // The constrcutor can be empty or passed in the lrc string
+    var Lyricer = function (options) {
+        this.divID = "lyricer"; // the default html container id
+        this.currentcss = "lyricer-current-line"; // this css for the line current playing
+        this.lineidPrefix = "lyricer-line"; // the id prefix for each line
+        this.showLines = 8; //lines showing before and after;
+        this.clickable = true;
+        this.clickEventName = "lyricerclick";
+        if( options ) {
+            for( var prop in options ) {
+                if ( typeof this[prop] != "undefined" && options.hasOwnProperty(prop)) {
+                    this[prop] =  options[prop];
+                }
+            }
+        }
+    };
+
+    Lyricer.prototype.setLrc = function(rawLrc) {
+        this.tags = {};
+        this.lrc = [];
+        this.rangeLrc = [];
+
+        var tagRegex = /\[([a-z]+):(.*)\].*/;
+        var lrcAllRegex = /(\[[0-9.:\[\]]*\])+(.*)/;
+        var timeRegex = /\[([0-9]+):([0-9.]+)\]/;
+        var timeRegexGim = /\[([0-9]+):([0-9.]+)\]/g;
+        var rawLrcArray = rawLrc.split(/[\r\n]/);
+        for (var i = 0; i < rawLrcArray.length; i++) {
+            // handle tags first
+            var tag = tagRegex.exec(rawLrcArray[i]);
+            if ( tag && tag[0] ) {
+                this.tags[tag[1]] = tag[2];
+                continue;
+            }
+            // handle lrc
+            var lrc = lrcAllRegex.exec(rawLrcArray[i]);
+            if ( lrc && lrc[0] ) {
+                var times = lrc[1].replace(/\]\[/g,"],[").split(",");
+                for (var j = 0; j < times.length; j++) {
+                    var time = timeRegex.exec(times[j]);
+                    if ( time && time[0] ) {
+                        this.lrc.push( { "starttime": parseInt(time[1],10) * 60 + parseFloat(time[2]), "line": lrc[2].replace(timeRegexGim,'') } );
+                    };
+                };
+            };
+        };
+
+        //sort lrc array
+        this.lrc.sort(function (a,b) {
+            return a.starttime - b.starttime;
+        });
+
+        // crate the range lrc array
+        // dummy lines
+        for (var i = 0; i < this.showLines; i++) {
+            this.rangeLrc.push( { "starttime": -1, "endtime": 0, "line": "&nbsp;" } );
+        };
+        // real data
+        var starttime = 0;
+        var line = "";
+        for (var i = 0; i < this.lrc.length; i++) {
+            endtime =  parseFloat(this.lrc[i].starttime);
+            this.rangeLrc.push( { "starttime": starttime, "endtime": endtime, "line": line } );
+            starttime = endtime;
+            line = this.lrc[i].line;
+        };
+        this.rangeLrc.push( { "starttime": starttime, "endtime": 999.99, "line": line } );
+        // dummy lines
+        for (var i = 0; i < this.showLines; i++) {
+            this.rangeLrc.push( { "starttime": -1, "endtime": 0, "line": "&nbsp;" } );
+        };
+        this.totalLines = this.rangeLrc.length;
+
+        // set html and move to start
+        setHtml(this);
+        this.move(0);
+    };
+
+    var setHtml = function(self) {
+        self.currentLine = 0;
+
+        var container = document.getElementById(self.divID);
+        container.innerHTML = "";
+        var ul = document.createElement("ul");
+        container.appendChild(ul);
+        for (var i = 0; i < self.totalLines; i++) {
+            var li = document.createElement("li");
+            li.innerHTML = self.rangeLrc[i].line;
+            if (!li.innerHTML) {li.innerHTML="&nbsp;"};
+            li.setAttribute("id", self.lineidPrefix + i);
+            if (self.clickable) {
+                li.onclick = lineClicked(self, i);
+                li.style.cursor = 'pointer';
+            }
+            ul.appendChild(li);
+        };
+
+        // hide the later ones
+        for (var i = self.showLines; i < self.totalLines; i++) {
+            document.getElementById(self.lineidPrefix + i).style.display = "none";
+        };
+    };
+
+    var lineClicked = function(self, id) {
+        return function(){
+            var detail = {"time": self.rangeLrc[id].starttime};
+            var e = new CustomEvent(self.clickEventName, {
+                'detail': detail,
+                "bubbles": true
+            });
+            var elem = document.getElementById(self.lineidPrefix + id);
+            elem.dispatchEvent(e);
+        };
+    };
+
+
+    Lyricer.prototype.move = function(time) {
+        for (var i = 0; i < this.totalLines; i++) {
+            if (time >= this.rangeLrc[i].starttime && time < this.rangeLrc[i].endtime) {
+                this.currentLine = i;
+                moveToLine(this,this.currentLine);
+                return;
+            };
+        };
+    };
+
+    var moveToLine = function (self, line) {
+        var startShow = line - self.showLines;
+        var endShow = line + self.showLines;
+        for (var i = 0; i < self.totalLines; i++) {
+            var li = document.getElementById(self.lineidPrefix + i);
+            if ( i >= startShow && i <= endShow ) {
+                li.style.display = "block";
+            } else{
+                li.style.display = "none";
+            };
+            if (i==line) {
+                li.className = self.currentcss;
+            } else {
+                li.className = "";
+            };
+        };
+    };
+
+    window.Lyricer = Lyricer; //exposed to global
+
+})();