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;
}
<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];
var i = 0;
$.each(lrcJSON, function (key, value) {
lrcTime[i++] = parseFloat(key.substr(1, 3)) * 60 + parseFloat(key.substring(4, 10));
ul.innerHTML += "<li><p>" + lrcJSON[key] + "</p></li>";
});
lrcTime[lrcTime.length] = lrcTime[lrcTime.length - 1] + 3;
var $li = $("#lrclist>li");
var currentLine = 0;
var currentTime;
var audio = document.getElementById("audio");
var ppxx;
audio.ontimeupdate = function () {
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 () {
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;
}
}
};