今天偶尔听到这首歌，心里泛起了涟漪。程序员嘛，就要用自己的方式实现出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我最亲爱的</title>
<script type="text/javascript" src="./jquery-1.12.4.min.js" ></script>
<style>
* {
margin: 0;
padding: 0;
}
.bg {
/* 歌词调整区 */
width: 100%;/* 歌词显示盒子宽 */
height: 100px;/* 歌词显示盒子高度，需要多显示几行歌词相应调大即可 */
/* */ /* 歌词背景颜色 */
background-color: #74BC68;
margin: 15px auto;
color: deeppink;/* 歌词默认颜色,灰色 */
font-size: 12px;/* 歌词字体默认大小 */
overflow: hidden;
position: relative;
font-family: "微软雅黑";
}
.bg ul {
width: 100%;
position: absolute;
top: 0;
left: 0;
list-style: none;
}
.bg ul li {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
}
.bg ul li.active {
/* 歌词高亮滚动区 */
color:#CD0A0A;/* 歌词滚动高亮颜色 */
/* font-weight: bold; *//* 文本加粗，不要，太丑了！ */
font-size: 15px; /* 歌词滚动行文字大小 */
}
audio {
/* 播放器调整区 */
width: 100%; /* 调整播放器宽度 */
/* 其他要修改播放器在这里修改 */
}
</style>
</head>
<body>
<center> <!-- 这里修改播放器播放音乐 -->
<audio autoplay="autoplay" src="./我最亲爱的.mp3" controls></audio>
</center>
<div class="bg"></div><!-- 显示歌词 -->
<div id="frozen0422"></div>
</body>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#frozen0422").load("我最亲爱的.lrc","gb2312");
function parseLyric(text) {
//按行分割歌词
let lyricArr = text.split('\n');
let result = []; //新建一个数组存放最后结果
//遍历分割后的歌词数组，将格式化后的时间节点，歌词填充到result数组
for (i = 0; i < lyricArr.length; i++) {
let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g); //正则匹配播放时间
let lineLyric = "";
if (lyricArr[i].split(playTimeArr).length > 0) {
lineLyric = lyricArr[i].split(playTimeArr);
}
if (playTimeArr != null) {
for (let j = 0; j < playTimeArr.length; j++) {
let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":");
//数组填充
result.push({
time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4),
content: String(lineLyric).substr(1)
});
}
}
}
return result;
}
// 格式根据lrc歌词文件换句前加入\n 换行符,然后删除多余空行.即可!
let text = "[ti:我最亲爱的]\n[ar:张惠妹]\n[al:我的歌声里]\n[by:清风]\n[00:02.10]我最亲爱的\n[00:03.95]作词：林夕 作曲：Russell Harris\n[00:06.45]演唱：张惠妹\n[00:08.58]\n[00:09.94]就爱歌词网：www.22lrc.com\n[00:17.42]\n[00:19.46]很想知道你近况\n[00:22.59]我听人说 还不如你对我讲\n[00:32.48]经过那段遗憾\n[00:36.90]请你放心 我变得更加坚强\n[00:45.47]世界不管怎样荒凉\n[00:52.18]爱过你就不怕孤单\n[00:56.31]\n[00:57.50]我最亲爱的 你过的怎麼样\n[01:04.33]没我的日子 你别来无恙\n[01:11.14]依然亲爱的 我没让你失望\n[01:17.99]让我亲一亲 像过去一样\n[01:22.99]\n[01:28.27]我想你一定喜欢 现在的我\n[01:35.35]学会了你最爱的开朗\n[01:41.84]想起你的模样\n[01:45.69]有什麼错 还不能够被原谅\n[01:54.12]世界不管怎样荒凉\n[02:00.97]爱过你就不怕孤单\n[02:04.85]\n[02:06.12]我最亲爱的 你过的怎麼样\n[02:12.97]没我的日子 你别来无恙\n[02:19.85]依然亲爱的 我没让你失望\n[02:26.71]让我亲一亲 像朋友一样\n[02:32.28]\n[02:48.76]虽然离开了你的时间\n[02:54.26]比一起还漫长 我们总能补偿\n[03:02.51]因为中间空白的时光\n[03:07.85]如果还能分享 也是一种浪漫\n[03:16.55]关系虽然不再一样\n[03:23.17]关心却怎么能说断就断\n[03:30.28]\n[03:31.87]我最亲爱的 你过的怎麼样\n[03:38.73]没我的日子 你别来无恙\n[03:45.65]依然亲爱的 我没让你失望\n[03:52.38]让我亲一亲 像亲人一样\n[03:57.71]\n[03:59.27]我最亲爱的 你过的怎麼样\n[04:06.30]没我的日子 你别来无恙\n[04:12.97]依然亲爱的 我没让你失望\n[04:19.85]让我亲一亲 像过去一样\n[04:25.81]";
// 这里请按照格式放入相应歌词--结束
let audio = document.querySelector('audio');
let result = parseLyric(text); //执行lyc解析
// 把生成的数据显示到界面上去
let $ul = $("<ul></ul>");
for (let i = 0; i < result.length; i++) {
let $li = $("<li></li>").text(result[i].content);
$ul.append($li);
}
$(".bg").append($ul);
let lineNo = 0; // 当前行歌词
let preLine =1; // 当播放6行后开始滚动歌词
let lineHeight = -30; // 每次滚动的距离
// 滚动播放 歌词高亮 增加类名active
function highLight() {
let $li = $("li");
$li.eq(lineNo).addClass("active").siblings().removeClass("active");
if (lineNo > preLine) {
$ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });
}
}
highLight();
// 播放的时候不断渲染
audio.addEventListener("timeupdate", function() {
if (lineNo == result.length) return;
if ($("li").eq(0).hasClass("active")) {
$("ul").css("top", "0");
}
lineNo =getLineNo(audio.currentTime);
highLight();
lineNo++;
});
// 当快进或者倒退的时候，找到最近的后面那个result[i].time
function getLineNo(currentTime) {
if (currentTime >= parseFloat(result[lineNo].time)) {
// 快进
for (let i = result.length - 1; i >= lineNo; i--) {
if (currentTime >= parseFloat(result[i].time)) {
return i;
}
}
} else {
// 后退
for (let i = 0; i <= lineNo; i++) {
if (currentTime <= parseFloat(result[i].time)) {
return i - 1;
}
}
}
}
//播放结束自动回到开头
audio.addEventListener("ended", function() {
lineNo = 0;
highLight();
audio.play();
$("ul").css("top", "0");
});
});
</script>
</html>