歌词高亮同步演示

马黑黑 · 发表于 2022-2-21 12:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-2-21 12:45

代码：

<style tpye="text/css">
#lrcUl { width: 500px; list-style-type: none; column-count: 3; column-gap: 4px; }
#lrcUl li { font-size:14px; color: black; }
#myplayer { outline: none; list-style-type: none; }
</style>
<audio id="myplayer" src="http://www.kumeiwp.com/sub/filestores/2022/01/12/93d3ca32d49fd061a3ca2c2c6b196c6b.mp3" controls="controls"></audio>
<ul id="lrcUl">
</ul>
<script language="javascript">
var lrcAr=[
["00:00.000"," 夜机"],
["00:20.000"," 作词 : 陈少琪"],
["00:30.000"," 演唱 : 陈慧娴"],
["00:47.02","回头再看微微灯光"],
["00:50.83","无止境寂寥不安"],
["00:54.40","藏身于无人机舱"],
["00:57.28","心跟你道晚安"],
["01:01.35","离离细雨茫茫星光"],
["01:04.81","明朝早别来惊慌"],
["01:08.30","投奔于遥遥他方"],
["01:10.83","愿遗忘某寄望"],
["01:15.79","原谅今宵我告别了"],
["01:20.86","活泼的心像下沉掉"],
["01:24.01","梦里有他又极微妙"],
["01:27.44","情怎可料"],
["01:30.73","怀念当初你太重要"],
["01:34.01","但你始终未尽全力"],
["01:37.40","让这颗心静静逃掉"],
["01:40.54","情也抹掉"],
["01:48.48","回头再看微微灯光"],
["01:52.47","无止境寂寥不安"],
["01:56.03","藏身于无人机舱"],
["01:58.78","心跟你道晚安"],
["02:02.91","离离细雨茫茫星光"],
["02:06.38","明朝早别来惊慌"],
["02:09.76","投奔于遥遥他方"],
["02:12.61","愿遗忘某寄望"],
["02:17.41","原谅今宵我告别了"],
["02:22.58","活泼的心像下沉掉"],
["02:25.71","梦里有他又极微妙"],
["02:29.07","情怎可料"],
["02:32.44","怀念当初你太重要"],
["02:35.75","但你始终未尽全力"],
["02:38.97","让这颗心静静逃掉"],
["02:42.30","情也抹掉"],
["03:10.97","今天起的每晚"],
["03:14.50","纵有星光灿烂"],
["03:18.16","可惜心灰已冷"],
["03:21.19","情途更暗淡路更弯"],
["03:25.42","今天起的每晚"],
["03:27.81","你要珍惜岁月"],
["03:31.88","不必感叹"],
["03:33.62","情缘或会某日再返"],
["03:40.81","原谅今宵我告别了"],
["03:45.48","活泼的心像下沉掉"],
["03:48.79","梦里有他又极微妙"],
["03:51.96","情怎可料"],
["03:55.30","全是你一生轻佻"],
["03:58.47","无情地把我当玩笑"],
["04:01.81","让这颗心静静逃掉"],
["04:05.04","情也抹掉"]
];
var offset = 0.5; //偏移量
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
lrcAr[j][0] = toSec(lrcAr[j][0]);
lrcUl.innerHTML += "<li id='li" + lrcAr[j][0] + "'>" + lrcAr[j][1] + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr[0] * 60 + parseInt(tmpAr[1]);
return lrcTime;
}
//同步高亮歌词
myaud.ontimeupdate = function() {
let tt = this.currentTime + offset;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr[j][0]){
if(j > 0){
let idxLast = lrcAr[j-1][0];
document.getElementById("li" + idxLast).style.color = "black";
}
let idx = lrcAr[j][0];
document.getElementById("li" + idx).style.color = "red";
}
}
}
// 播放结束取消最后一行红色、重新播放
myaud.onended = function() {
document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = "black";
this.play();
}
</script>

复制代码

马黑黑 · 发表于 2022-2-21 12:57

高亮显示要比同步显示歌词略为复杂。这里给出一些说明：

一、audio不设置 loop 值，由 audio 的 onended 事件监视播放是否结束，如果结束，则让最后一行歌词变回黑色，并重新播放歌曲。也就是说，重复播放功能有 onended 事件掌握。

二、歌词由JS布置，每一个 li 标签一句歌词，均设定有 id 索引号，歌词高亮显示机制借助 id 实现。

三、关于歌词时间偏移值 offset ：lrc歌词正确的话，offset = 0 便可。

四、ul 标签的宽度与列数：本例 ul 宽度设为 500px，列数是 3 ，建议根据情况修改。

五、其它：lrc歌词数组与之前的歌词同步JS程序相一致。

我还在忙于布局新业务，尚未提到的相关事项将适时依据提问做出答复。祝各位安好！