歌词高亮同步演示

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

马黑黑 发表于 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 = toSec(lrcAr);
lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步高亮歌词
myaud.ontimeupdate = function() {
let tt = this.currentTime + offset;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById("li" + idxLast).style.color = "black";
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "red";
}
}
}
// 播放结束取消最后一行红色、重新播放
myaud.onended = function() {
document.getElementById("li" + lrcAr).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程序相一致。

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

红影发表于 2022-2-21 14:46

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

谢谢黑黑，辛苦了，百忙之中还抽空写教程。祝黑黑工作顺利{:4_187:}

红影发表于 2022-2-21 14:52

去播放了歌曲，看到了歌词逐句变红，真神奇。黑黑又带来一种歌词同步全代码的表达{:4_199:}

小辣椒 发表于 2022-2-21 21:51

黑黑出差回来了？

小辣椒 发表于 2022-2-21 21:52

马黑黑发表于 2022-2-21 12:57
高亮显示要比同步显示歌词略为复杂。这里给出一些说明：

一、audio不设置 loop 值，由 audio 的 onended ...

哇塞~~~还可以这样玩啊，黑黑你太强大了{:4_178:}

加林森 发表于 2022-2-22 17:51

跟到学习

马黑黑 发表于 2022-2-22 20:03

小辣椒发表于 2022-2-21 21:52
哇塞~~~还可以这样玩啊，黑黑你太强大了

一般般吧

马黑黑 发表于 2022-2-22 20:04

加林森发表于 2022-2-22 17:51
跟到学习

{:5_108:}

加林森 发表于 2022-2-22 20:05

马黑黑发表于 2022-2-22 20:04

老黑回来了吗？我今天也制作了一个，你帮着我看看。谢谢！{:4_191:}

马黑黑 发表于 2022-2-22 20:05

加林森发表于 2022-2-22 20:05
老黑回来了吗？我今天也制作了一个，你帮着我看看。谢谢！

还木有回去

加林森 发表于 2022-2-22 20:18

马黑黑发表于 2022-2-22 20:05
还木有回去

嗯嗯，你真是辛苦了。{:4_191:}

页: [1]

花潮论坛's Archiver

歌词高亮同步演示