一首老歌，也是有回忆的歌曲
兼容模式能看。。。。{:5_112:}
本帖最后由 加林森 于 2022-2-22 23:15 编辑 <br /><br />东篱闲人 发表于 2021-11-13 21:35
兼容模式能看。。。。
老兄，我是极速制作的啊
<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.music.163.com/outchain/player?type=2&id=36861904&auto=1&" controls="controls"></audio>
<ul id="lrcUl">
</ul>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=36861904&auto=1&height=66"></iframe>
<script language="javascript">
var lrcAr=[
["00:01.28","张学友 梅艳芳-相爱很难"],
["00:03.91","词曲:作曲/编曲:陈辉阳"],
["00:06.72","填词:林夕"],
["00:18.87","女:最好有生一日都爱下去"],
["00:25.81","但谁人能将恋爱当做终生兴趣"],
["00:33.31","男:生活其实旨在找到个伴侣"],
["00:40.31","面对现实热恋很快变长流细水"],
["00:47.31","女:可惜我不智或侥幸"],
["00:51.06","对火花天生敏感"],
["00:54.50","男:不过两只手拉得太紧"],
["00:58.44","合:爱到过了界那对爱人"],
["01:01.19","同时亦最易变成一对敌人"],
["01:07.69","女:也许相爱很难"],
["01:11.31","就难在其实双方各有各寄望"],
["01:14.63","怎么办"],
["01:16.13","男:要单恋都难"],
["01:18.56","受太大的礼会内疚却也无力归还"],
["01:23.31","女:也许不爱不难"],
["01:25.51","但如未成佛升仙也会怕"],
["01:28.56","爱情前途黯淡"],
["01:30.50","男:爱不爱都难"],
["01:32.95","未快乐先有责任给予对方面露欢颜"],
["01:38.19","女:得到浪漫又要有空间"],
["01:41.63","男:得到定局却怕去到终站"],
["01:45.13","合:然后付出多得到少不介意豁达"],
["01:49.00","又担心有人看不过眼"],
["02:04.88","女:可惜我不智或侥幸"],
["02:08.26","对火花天生敏感"],
["02:11.69","男:不过两只手拉得太紧"],
["02:15.51","合:爱到过了界那对爱人"],
["02:18.46","同时亦最易变成一对敌人"],
["02:25.71","女:也许相爱很难"],
["02:27.98","就难在其实双方各有各寄望"],
["02:31.42","怎么办"],
["02:32.79","男:要单恋都难"],
["02:34.97","受太大的礼会内疚却也无力归还"],
["02:39.60","女:也许不爱不难"],
["02:41.73","但如未成佛升仙也会怕"],
["02:44.86","爱情前途黯淡"],
["02:46.66","男:爱不爱都难"],
["02:48.85","未快乐先有责任给予对方面露欢颜"],
["02:53.10","女:得到浪漫又要有空间"],
["02:57.48","男:得到定局却怕去到终站"],
["03:00.92","合:然后付出多得到少不介意豁达"],
["03:04.67","又担心有人看不过眼"],
["03:10.98","合:无论热恋中失恋中"],
["03:13.73","都永远记住第一戒"],
["03:18.42","别要张开双眼"]
];
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>
加林森 发表于 2021-11-13 21:40
老兄，我是极速制作的啊。
那可真奇怪。。。{:5_117:}
东篱闲人 发表于 2021-11-13 21:41
那可真奇怪。。。
你能不能看见？
加林森 发表于 2021-11-13 21:42
你能不能看见？
兼容模式下能看。。。
东篱闲人 发表于 2021-11-13 21:57
兼容模式下能看。。。
极速不能看见吗？
加林森 发表于 2021-11-13 22:00
极速不能看见吗？
嗯嗯，不能。
东篱闲人 发表于 2021-11-13 22:03
嗯嗯，不能。
嗯嗯，我知道了。我能看见你的你看不见我的！
经典咏流传， 听不够的歌， 猫早上就沙发听了队长 {:5_106:}
{:4_180:}
大猫咪 发表于 2021-11-13 22:21
经典咏流传， 听不够的歌， 猫早上就沙发听了队长
嗯嗯，好的好的！谢谢猫猫支持哈。{:4_179:}
大猫咪烤火去了
马黑黑 发表于 2021-11-14 17:19
大猫咪烤火去了
晚上好，老黑！
这个地址不带S的，我也看不到，是跟着链接去看的，好听{:4_187:}
红影 发表于 2021-11-14 19:02
这个地址不带S的，我也看不到，是跟着链接去看的，好听
啊？红影看不见啊？
加林森 发表于 2021-11-14 18:05
晚上好，老黑！
队长晚上好
马黑黑 发表于 2021-11-14 21:50
队长晚上好
老黑晚上好
加林森 发表于 2021-11-14 21:56
老黑晚上好
你好你好
马黑黑 发表于 2021-11-14 22:05
你好你好
我们来个熊抱{:4_179:}
加林森 发表于 2021-11-14 22:15
我们来个熊抱
你还是去找个菇凉熊一下吧{:4_189:}