折柳 冬奥闭幕式节目之一（学习歌词同步高亮）
<style tpye="text/css">#bigPa { position: relative; left:-280px;top:120px; width: 1100px; height: 600px; background:#333 url('https://pic.imgdb.cn/item/62148f842ab3f51d91b67d96.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:8px;}
#lrcUl { width: 580px; list-style-type: none; column-count: 3; column-gap: 4px; position: relative; left:320px;top:130px;list-style-type: none;}
#lrcUl li { font-size:15px; color: #FFE1FF;text-shadow:2px 2px 4px #000; list-style-type: none;}
#myplayer { outline: none; list-style-type: none; }
</style>
<div id="bigPa">
<ul id="lrcUl">
</ul>
<div style="position: relative; left:460px; top: 200px;">
<audio id="myplayer" src="http://www.kumeiwp.com/sub/filestores/2021/03/21/579b0b1b82f0f238097317ee294b3c61.mp3"controls="controls"
></audio>
</div></div><br><br><br><br><br><br><br><br>
<script language="javascript">
var lrcAr=[
["00:00.06","《折柳》冬奥闭幕曲 "],
["00:11.21","制作：红影 "],
["00:21.46","长亭外古道边"],
["00:28.19","芳草碧连天"],
["00:35.01","晚风拂柳笛声残"],
["00:41.90","夕阳山外山"],
["00:48.55","天之涯地之角"],
["00:55.58","知交半零落"],
["01:02.50","一壶浊酒尽余欢"],
["01:09.25","今宵别梦寒"],
["01:29.79","长亭外古道边"],
["01:36.79","芳草碧连天"],
["01:43.56","晚风拂柳笛声残"],
["01:50.40","夕阳山外山"],
["01:57.22","天之涯地之角"],
["02:04.11","知交半零落"],
["02:11.00","一壶浊酒尽余欢"],
["02:17.85","今宵别梦寒"],
["02:24.74","长亭外古道边"],
["02:31.59","芳草碧连天"],
["02:38.38","晚风拂柳笛声残"],
["02:45.22","夕阳山外山"],
["02:52.13","天之涯地之角"],
["02:58.90","知交半零落"],
["03:05.88","一壶浊酒尽余欢"],
["03:12.78","今宵别梦寒"],
["03:19.53","长亭外古道边"],
["03:26.44","芳草碧连天"],
["03:33.22","晚风拂柳笛声残"],
["03:40.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 = "#FFFACD";
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "#00FF00";
}
}
}
// 播放结束取消最后一行红色、重新播放
myaud.onended = function() {
document.getElementById("li" + lrcAr).style.color = "#FFFACD";
this.play();
}
</script> 非常经典的闭幕式歌舞，这些亮点值得回味， “中国式浪漫”。让世界惊艳！
红影好制作，真棒！
{:4_204:}{:4_190:} 红影制作漂亮。{:4_199:} 大猫咪 发表于 2022-2-22 19:56
非常经典的闭幕式歌舞，这些亮点值得回味， “中国式浪漫”。让世界惊艳！
红影好制作，真棒！
365个男女老少，拿着闪亮的柳丝出来，还是挺震撼的。还有那些优雅的长裙女子，踏着不停向前延伸的柳枝地上图案出来的时候，特别惊艳。这个闭幕式太精彩了，给世界留下了惊艳的一笔{:4_187:} 加林森 发表于 2022-2-22 20:02
红影制作漂亮。
我把歌词高亮变成绿色了，应对这次冰雪盛会带来满目春色的主题{:4_173:} 红影 发表于 2022-2-22 20:14
365个男女老少，拿着闪亮的柳丝出来，还是挺震撼的。还有那些优雅的长裙女子，踏着不停向前延伸的柳枝地 ...
嗯嗯 “折柳”惜别冬奥，演绎中国人传承千年的“惜别怀远。
{:4_204:} 红影 发表于 2022-2-22 20:15
我把歌词高亮变成绿色了，应对这次冰雪盛会带来满目春色的主题
挺好的，恭喜你成功了！{:4_187:}{:4_204:} 大猫咪 发表于 2022-2-22 20:18
嗯嗯 “折柳”惜别冬奥，演绎中国人传承千年的“惜别怀远。
非常有特色，是中国人都懂的浪漫。折柳相送，也是送一份绿色的希望。 红影 发表于 2022-2-22 20:35
非常有特色，是中国人都懂的浪漫。折柳相送，也是送一份绿色的希望。
嗯嗯太有创意了，为导演点赞 {:4_204:} 加林森 发表于 2022-2-22 20:30
挺好的，恭喜你成功了！
不成功，不知道为什么歌词前面有小点点{:4_173:} 大猫咪 发表于 2022-2-22 20:36
嗯嗯太有创意了，为导演点赞
是啊，看到大多数人都对这次的创意很赞扬，老谋子的确厉害{:4_187:} 红影 发表于 2022-2-22 20:44
是啊，看到大多数人都对这次的创意很赞扬，老谋子的确厉害
嗯嗯 写意唯美，意义深.. 红影 发表于 2022-2-22 20:43
不成功，不知道为什么歌词前面有小点点
我那个也有的啊。 大猫咪 发表于 2022-2-22 20:46
嗯嗯 写意唯美，意义深..
开幕式我没看，忘记了，闭幕式还是看到你们谈起，才想起来去看。有时间把开幕也重新看一下{:4_173:} 红影 发表于 2022-2-22 20:50
开幕式我没看，忘记了，闭幕式还是看到你们谈起，才想起来去看。有时间把开幕也重新看一下
嗯嗯 现在全世界都真传，值得一看，也必须看 {:5_106:} 师妹可以上央视参与制作大型歌画了！喜欢这样歌词像OK唱一样跟着走，而且全面展示。{:4_187:}
加林森 发表于 2022-2-22 20:50
我那个也有的啊。
好像黑黑的没有啊，我在本地测试的时候也没有。 大猫咪 发表于 2022-2-22 20:52
嗯嗯 现在全世界都真传，值得一看，也必须看
嗯嗯，闭幕式已经看得很感动，赶紧去找开幕式再感动自己一下{:4_173:} 樵歌 发表于 2022-2-22 20:53
师妹可以上央视参与制作大型歌画了！喜欢这样歌词像OK唱一样跟着走，而且全面展示。
嗯，去找了闭幕式的图片，学习的黑黑的歌词高亮，学点新东西，还是挺开心的{:4_173:} 亲爱的，非常漂亮，加了背景图图{:4_178:}