diff --git a/web/css/lyricer.min.css b/web/css/lyricer.min.css
new file mode 100644
index 0000000..29e4748
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/web/html/body/nas/music.html b/web/html/body/nas/music.html
index 1d8e021..aa4749c 100644
--- a/web/html/body/nas/music.html
+++ b/web/html/body/nas/music.html
@@ -6,19 +6,20 @@
     <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">
     <div id="header"></div>
 
     <div class="layui-body mybody body2">
-      <!--  <div id="side"></div>-->
+        <!--  <div id="side"></div>-->
 
         <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">
@@ -64,23 +67,24 @@
     let isRandom = true;
     let playIndex = 0;
     let playNow = ""
-    let share=getParam('share');
-    if(share!=null){
+    let share = getParam('share');
+    if (share != null) {
         //$('#playlist').remove()
         $('#reload').remove()
         $('#next').remove()
         $('#play_share').remove()
     }
-    $.get("/nas/music/getlocalhost.do",{share:share}, function (obj) {
+
+    $.get("/nas/music/getlocalhost.do", {share: share}, function (obj) {
         try {
             let json = JSON.parse(obj);
-            if(json.code===403){
+            if (json.code === 403) {
                 layer.msg('您没有权限访问')
                 return;
             }
-            localhost = json.data ;
+            localhost = json.data;
             if (localhost === 'http://null:8000' || localhost === ":8000") {
-                localhost = "https://"+window.location.host;
+                localhost = "https://" + window.location.host;
             }
         } catch (e) {
             localhost = ""
@@ -90,11 +94,11 @@
             let table = layui.table;
             let element = layui.element;
             let listTable = undefined;
-            $.post("/public/nas/music/playlist.do",{share:share},function (json) {
-                if(json.code!==0){
+            $.post("/public/nas/music/playlist.do", {share: share}, function (json) {
+                if (json.code !== 0) {
                     return;
                 }
-                listTable=table.render({
+                listTable = table.render({
                     elem: '#playlist'
                     , url: json.data //数据接口
                     , method: 'post'
@@ -115,19 +119,19 @@
                     , done: function (res, curr, count) {
                         musicLib = res.data
                         $('#musicSize').html("歌单总数:" + res.size)
-                    },error:function (e,data){
+                    }, error: function (e, data) {
                     }
                 })
                 table.on('rowDouble(music)', function (obj) {
                     //obj 同上
                     if (obj.data.isdir === 1) {
-                        let path=obj.data.md5;
-                        if(path===undefined){
-                            path=obj.data.file;
+                        let path = obj.data.md5;
+                        if (path === undefined) {
+                            path = obj.data.file;
                         }
                         listTable.reload({
                             where: {
-                                path:path
+                                path: path
                             }
                             , page: {
                                 curr: 1
@@ -149,49 +153,49 @@
                             window.open(localhost + "/nas/music/play.do?token=&random=false&filePath=" + data.md5)
                         }
                     } else if (obj.event === 'play') {
-                        if(data.md5!==undefined){
+                        if (data.md5 !== undefined) {
                             play(data)
                             return;
                         }
                         $.ajax({
                             type: "POST",
-                            url:localhost + "/nas/music/list.do",
+                            url: localhost + "/nas/music/list.do",
                             contentType: "application/json; charset=utf-8",
-                            data:JSON.stringify({type: true, path: data.file}),
+                            data: JSON.stringify({type: true, path: data.file}),
                             dataType: "json",
-                            success:function (json){
+                            success: function (json) {
                                 try {
                                     if (json.code === 0) {
                                         playIndex = 0;
-                                        musicLib=[]
+                                        musicLib = []
                                         for (let datum of json.data) {
-                                            if(datum.isdir===0){
+                                            if (datum.isdir === 0) {
                                                 musicLib.push(datum)
                                             }
                                         }
                                         isRandom = false;
                                         playNext()
                                     }
-                                }catch (e){
+                                } catch (e) {
 
                                 }
 
                             }
                         })
-                    }else if(obj.event==='share'){
-                        let isDir=false;
-                        let file=data.md5;
-                        if(data.isdir===1){
-                            isDir=true;
-                            file=data.file;
+                    } else if (obj.event === 'share') {
+                        let isDir = false;
+                        let file = data.md5;
+                        if (data.isdir === 1) {
+                            isDir = true;
+                            file = data.file;
                         }
-                        $.post('/nas/music/share.do',{file:file,isDir:isDir},function (json){
-                            if(json.code===0){
-                                var url="http://"+window.location.host+"/html/body/nas/music.html?share="+json.data.token
+                        $.post('/nas/music/share.do', {file: file, isDir: isDir}, function (json) {
+                            if (json.code === 0) {
+                                var url = "http://" + window.location.host + "/html/body/nas/music.html?share=" + json.data.token
                                 layer.prompt({
-                                    title:"分享链接",
-                                    value:url
-                                },function (value,index,elem){
+                                    title: "分享链接",
+                                    value: url
+                                }, function (value, index, elem) {
                                     $('.layui-layer-input')[0].select()
                                     document.execCommand("Copy")
                                     layer.close(index);
@@ -203,17 +207,19 @@
                 element.on('nav(menus)', function (elem) {
                 });
             })
-            function playShare(){
-                $.get('/nas/music/playShare.do?share='+share,function (json) {
+
+            function playShare() {
+                $.get('/nas/music/playShare.do?share=' + share, function (json) {
                     isRandom = false;
-                    playIndex =0;
+                    playIndex = 0;
                     json.data.forEach(function (item) {
                         musicLib.push(item)
                     })
                     play(json.data[0])
                 })
             }
-            if(share!==null){
+
+            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})
@@ -244,7 +256,7 @@
     $('#footer').load("/html/footer.html");
 
     $('#img').click(function () {
-        if(share!==null){
+        if (share !== null) {
             return;
         }
         isRandom = true;
@@ -256,14 +268,14 @@
     $('#next').click(function () {
         playNext()
     });
-    $('#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
+    $('#play_share').click(function () {
+        $.post('/nas/music/share.do', {file: playNow}, function (json) {
+            if (json.code === 0) {
+                let url = "http://" + window.location.host + "/html/body/nas/music.html?share=" + json.data.token
                 layer.prompt({
-                    title:"分享链接",
-                    value:url
-                },function(value,index,elem){
+                    title: "分享链接",
+                    value: url
+                }, function (value, index, elem) {
                     $('.layui-layer-input')[0].select()
                     document.execCommand("Copy")
                     layer.close(index);
@@ -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) {
@@ -301,7 +346,7 @@
             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
                 });
                 update(json.data)
                 player.play()
@@ -313,8 +358,8 @@
     }
 
     function play(_json) {
-        let md5=''
-        md5=_json.md5
+        let md5 = ''
+        md5 = _json.md5
         playNow = _json.md5
         player.updateSource({
             source: localhost + "/nas/music/play.do?random=false&filePath=" + md5
@@ -344,9 +389,9 @@
                     title: json.data.title,
                     artist: json.data.artist,
                     album: json.data.album,
-                    artwork:[
+                    artwork: [
                         {
-                            src: localhost+'/nas/music/web/image.do?fileName='+fileName,
+                            src: localhost + '/nas/music/web/image.do?fileName=' + fileName,
                             type: 'image/png',
                             sizes: '128x128'
                         }
@@ -358,7 +403,8 @@
                 });
             }
         })
-        $('#img').attr("src",localhost+'/nas/music/web/image.do?fileName='+fileName);
+        $('#img').attr("src", localhost + '/nas/music/web/image.do?fileName=' + fileName);
+        updateLrc()
     }
 
 
diff --git a/web/js/AudioPlayer.js b/web/js/AudioPlayer.js
index 288b6c2..497f056 100644
--- 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) {
diff --git a/web/js/lyricer.min.js b/web/js/lyricer.min.js
new file mode 100644
index 0000000..7162188
--- /dev/null
+++ 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
+
+})();
\ No newline at end of file
