《相会在梦里》 林翠萍 (同步高亮歌词)
本帖最后由 加林森 于 2022-2-23 14:35 编辑 <br /><br /><img src="https://pic.imgdb.cn/item/6214acbf2ab3f51d91fbd1fc.jpg"><style tpye="text/css">
#lrcUl { width: 500px; list-style-type: none; column-count: 2; column-gap: 4px; }
#lrcUl li { font-size:14px; color: black;list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
</style>
<audio id="myplayer"
src="https://www.joy127.com/url/88699.mp3" controls="controls"></audio>
<ul id="lrcUl">
</ul>
<script language="javascript">
var lrcAr=[
["00:00.000","相会在梦里"],
["00:07.000","演唱 林翠萍"],
["00:21.000","曾经说过长相思守"],
["00:26.000","曾经说过永不离分"],
["00:31.000","怎能一去不回叫我心儿碎"],
["00:37.000","用酒买醉泪儿也双吹"],
["00:42.000","只能够每晚在梦中和你相会"],
["00:47.000","只能够在梦中相依畏"],
["00:53.000","啊 何时才能回到我身边"],
["01:01.000","相隔千万里"],
["01:04.000","相思在心底"],
["01:06.000","相会在梦里"],
["01:21.000","曾经说过长相思守"],
["01:27.000","曾经说过永不离分"],
["01:32.000","怎能一去不回叫我心儿碎"],
["01:38.000","用酒买醉泪儿也双吹"],
["01:43.000","只能够每晚在梦中和你相会"],
["01:48.000","只能够在梦中相依畏"],
["01:54.000","啊 何时才能回到我身边"],
["02:02.000","相隔千万里"],
["02:05.000","相思在心底"],
["02:08.000","相会在梦里"],
["02:33.000","只能够每晚在梦中和你相会"],
["02:39.000","只能够在梦中相依畏"],
["02:44.000","啊 何时才能回到我身边"],
["02:53.000","相隔千万里"],
["02:55.000","相思在心底"],
["02:58.000","相会在梦里"]
];
var offset = 0; //偏移量
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-22 18:34 编辑
终于同步了。{:4_205:}
恭喜队长做成功了，还可以把歌词放在图片上的。我也做了个，一会发出来{:4_187:} 这个好像是爱拼才会赢的的曲子呢。 红影 发表于 2022-2-22 19:25
恭喜队长做成功了，还可以把歌词放在图片上的。我也做了个，一会发出来
哈哈，折腾了一下午，终于折腾出来了。谢谢红影支持！{:4_187:} 红影 发表于 2022-2-22 19:26
这个好像是爱拼才会赢的的曲子呢。
就是它的。同步一起的。 加林森 发表于 2022-2-22 19:28
哈哈，折腾了一下午，终于折腾出来了。谢谢红影支持！
我做个了再图片上的，应发出来了，肚胀去看看{:4_173:} 加林森 发表于 2022-2-22 19:29
就是它的。同步一起的。
头一次听到这个国语版的歌曲呢。
恭喜队长做成功了 {:4_187:}非常好听， 好分享{:4_204:}{:4_190:} 红影 发表于 2022-2-22 19:37
我做个了再图片上的，应发出来了，肚胀去看看
好的好的 红影 发表于 2022-2-22 19:38
头一次听到这个国语版的歌曲呢。
好听吧。猫猫晚上好！{:4_204:}{:4_190:} @马黑黑 @小辣椒 队长也是速度的，完成了作业{:4_178:} 给力，不错的 小辣椒 发表于 2022-2-22 21:57
队长也是速度的，完成了作业
谢谢小辣椒支持。{:4_204:} 马黑黑 发表于 2022-2-23 09:50
给力，不错的
谢谢老黑。为什么歌词前面有小黑点呢？ 加林森 发表于 2022-2-23 09:55
谢谢老黑。为什么歌词前面有小黑点呢？
这是论坛的一些特殊设置。你需要在 #lrcUl li { font-size:14px; color: black; } 大括号中加入一句 list-style-type: none;
这个 @红影 菇凉也碰上 马黑黑 发表于 2022-2-23 09:59
这是论坛的一些特殊设置。你需要在 #lrcUl li { font-size:14px; color: black; } 大括号中加入一句 list ...
谢谢老黑，现在对了。{:4_190:} 加林森 发表于 2022-2-23 10:02
谢谢老黑，现在对了。
{:5_108:} 马黑黑 发表于 2022-2-23 10:15
{:5_108:}
页:
[1]
2