js歌词滚动

• CSS部分

div {
   width: 340px;
   height: 500px;
   margin: 0 auto;
   overflow: hidden;
}

ul {
   transition-duration: 600ms;
}

ul,
li {
   list-style: none;
   padding: 0;
   margin: 0;
}

li.on {
   color: red;
}

p {
   overflow: hidden;
   text-overflow: ellipsis;
   height: 16px;
   line-height: 16px;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   display: -webkit-box;
   text-align: center;
   margin-top: 0;
   margin-bottom: 16px;
}

audio {
   margin-top: 10px;
}

• html部分

<div>
    <ul id="lrclist" style="transform: translateY(250px);">
        <!-- 保证歌词在正中间 -->
    </ul>
</div>
<audio id="audio" src="audio/1.mp3" controls="controls" autoplay="true"></audio>

• js部分
  歌词文件可直接放在本地或通过AJAX获取

var lrcJSON = {
  "[ti": "【魏无羡】曲尽陈情]",
   "[ar": "肖战]",
   "[al": "陈情令 国风音乐专辑]",
   "[by": "]",
   "[offset": " 0]",
   "[00: 00.00]": "【魏无羡】曲尽陈情 - 肖战",
   "[00:02.20]": "词 Lyricist：易者连消醉清酒",
   "[00: 04.03]": "曲 Composer：within_轶名【异新音乐】",
   "[00: 06.23]": "编曲 Arranger：向往【异新音乐】",
   "[00: 08.43]": "混音 Mixing：within_轶名",
   "[00: 09.72]": "母带 Original demo：within_轶名",
   "[00: 11.18]": "戏腔 Opera tune：aki_阿杰",
   "[00: 12.65]": "和声 Harmony：阿南sara",
   "[00: 13.94]": "笛子Flute：囚牛",
   "[00: 14.85]": "录音师 Recorder：浩渺天心_刘宇航【新律录音棚】",
   "[00: 18.52]": "制作人Producer：黄喜Luffy Huang / within_轶名",
   "[00: 20.54]": "制作 Production：异新音乐工作室",
   "[00: 22.56]": "监制Supervisor: 黃喜Luffy Huang / 王鑫",
   "[00: 24.21]": "出品发行 Production and publish：新湃传媒",
   "[00: 26.41]": "纵棹趁夜风小眠 载一舟江烟",
   "[00: 30.96]": "晚来揽星归 摘片柳叶吹彻天边",
   "[00: 38.09]": "展开泛黄的纸鸢 回首旧人间",
   "[00: 43.16]": "江灯飘摇远 往事随波如又一篇",
   "[00: 49.17]": "高台倚栏前 衔杯观花满长街",
   "[00: 55.48]": "玄武洞天 也曾浇血洗剑",
   "[01: 01.30]": "讥评堪过耳 心本勇绝何惧人言",
   "[01: 07.86]": "纵入火海 仍抱怀垂怜",
   "[01: 13.67]": "也曾笑夺酒坛 剑挑姑苏十里春",
   "[01: 19.65]": "无关生死事",
   "[01: 21.53]": "老来尽作江湖诗中人",
   "[01: 25.81]": "窗外玉兰影深 前生是梦还是真",
   "[01: 31.83]": "隔世春秋后",
   "[01: 33.76]": "昔年因果皆是曾“听闻”",
   "[02: 02.28]": "身陨不夜天 谁信年少无虚言",
   "[02: 08.41]": "为义之诺 也曾削笛舍剑",
   "[02: 14.34]": "流言任在前 丹心犹热何须来辩",
   "[02: 20.88]": "世事皆千人 千言千面",
   "[02: 26.66]": "也曾惊鸿过眼 指尖轻挑卷云纹",
   "[02: 32.41]": "无端引弦震 缘何梦中深记那一瞬",
   "[02: 38.81]": "树下落英纷纷 此刻是梦还是真",
   "[02: 44.63]": "偕行云游后",
   "[02: 46.69]": "世外江湖皆是“据传闻”",
   "[02: 51.77]": "丹心何须言在口 横笛闲吹落星斗",
   "[03: 03.48]": "使我徒有身后名 不如及时一杯酒",
   "[03: 15.05]": "也曾怀拥人间 使我独享一枝春",
   "[03: 21.14]": "无关生死事 缘何尽作江湖诗中人",
   "[03: 27.33]": "门外声浅影深 相逢是梦还是真",
   "[03: 33.34]": "隔世春秋后",
   "[03: 35.21]": "前生因果终会落成痕"
};


var lrcTime = [];//歌词对应的时间数组
var ul = $("#lrclist")[0];//获取ul

var i = 0;
$.each(lrcJSON, function (key, value) {//遍历lrc
    lrcTime[i++] = parseFloat(key.substr(1, 3)) * 60 + parseFloat(key.substring(4, 10));//00:00.000转化为00.000格式
    ul.innerHTML += "<li><p>" + lrcJSON[key] + "</p></li>";//ul里填充歌词
});
lrcTime[lrcTime.length] = lrcTime[lrcTime.length - 1] + 3;//如不另加一个结束时间，到最后歌词滚动不到最后一句


var $li = $("#lrclist>li");//获取所有li

var currentLine = 0;//当前播放到哪一句了
var currentTime;//当前播放的时间
var audio = document.getElementById("audio");
var ppxx;//保存ul的translateY值

audio.ontimeupdate = function () {//audio时间改变事件
    currentTime = audio.currentTime;
    for (j = currentLine, len = lrcTime.length; j < len; j++) {
        if (currentTime < lrcTime[j + 1] && currentTime > lrcTime[j]) {
            currentLine = j;
            ppxx = 250 - (currentLine * 32);
            ul.style.transform = "translateY(" + ppxx + "px)";
            $li.get(currentLine - 1).className = "";
            console.log("on" + currentLine);
            $li.get(currentLine).className = "on";
            break;
        }
    }
};

audio.onseeked = function () {//audio进度更改后事件
    currentTime = audio.currentTime;
    console.log("  off" + currentLine);
    $li.get(currentLine).className = "";
    for (k = 0, len = lrcTime.length; k < len; k++) {
        if (currentTime < lrcTime[k + 1] && currentTime < lrcTime[k]) {
            currentLine = k;
            break;
        }
    }
};