js播放音乐显示每句歌词

//本文以薛之谦的演员为例，文中的266097259.lrc为演员的歌词，本人为初学者，如有不好的地方，请指出

//HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">
    </script>
</head>
<body>
<audio id="player" src="yanyuan.mp3" controls="controls"></audio>
<div id="div"></div>
<script src="main.js"></script>
</body>
</html>

//JS文件

(function () {
    var player=document.querySelector("#player");
    var div=document.querySelector("#div");
    var lrc=null;
    function playing(lrcString) {
        var lrcObject = {};
        var lines = lrcString.split("\n");
        var p = /\[(\d{2}):(\d{2})\.\d{2}\](.+)/;
        for (var i = 0; i < lines.length; i++) {
             var t=p.exec(lines[i]);
             if(t) {
                 var min = parseInt(t[1]);
                 var sec = parseInt(t[2]);
                 var c=t[3];
                 var time = min * 60 + sec;
                 lrcObject[time] = c;
         }
        }
        return lrcObject;
    }
    
    
    $.get("266097259.lrc").done(function (data) {
        lrc = playing(data);
    });
    
    
    setInterval(function () {
    if (lrc) {
        var content = lrc[Math.floor(player.currentTime)];
            if (content) {

                  div.innerHTML = content;
            }
        }
    }, 1000);
})();

 

posted on 2016-08-15 12:28  、豆沙包﹏ゝ  阅读(442)  评论(0)  编辑  收藏  举报

导航