|
|
楼主 |
发表于 2024-10-29 13:29:58
|
显示全部楼层
IP:
本帖最后由 亚伦影音工作室 于 2024-10-29 13:31 编辑
经测试歌词sj放在二楼编辑器在一楼同步歌词一样显示。这样就解决了代码受限了！
<script >
var lrc = `[00:22.00]最后的枫叶(DJ何鹏版) - 陈瑞
[00:23.00]作词：绿柳
[00:24.00]作曲：陈伟
[00:25.00]编曲：牛侠
[00:26.00]监制：萧跃
[00:27.00]制作人：陈伟
[00:28.00]出品人：陈伟
[00:29.00]发行：四川讯飞超脑信息科技有限公司
[00:31.96]最后的那一片枫叶
[00:35.35]了断了尘缘空阙
[00:39.29]坠落在缠绵的深渊
[00:42.68]憔悴在风花雪月
[00:46.97]最后的那一片枫叶
[00:50.26]作别了西窗楼雪
[00:54.06]消失在茫茫的荒野
[00:57.75]沉睡在冰冷世界
[01:03.63]多少次我踏遍寒山
[01:07.17]寻觅你的多情笑靥
[01:10.92]多少次我凝望远方
[01:14.66]幻想你的独影摇曳
[01:18.65]你飘逸的身影
[01:22.09]宛若是一只香殒的蝴蝶
[01:26.13]你赤红的凋落埋葬了
[01:29.72]一季相思的誓约
[01:48.45]最后的那一片枫叶
[01:52.19]了断了尘缘空阙
[01:56.33]坠落在缠绵的深渊
[01:59.58]憔悴在风花雪月
[02:03.77]最后的那一片枫叶
[02:07.11]作别了西窗楼雪
[02:10.90]消失在茫茫的荒野
[02:14.59]沉睡在冰冷世界
[02:20.18]多少次我踏遍寒山
[02:24.02]寻觅你的多情笑靥
[02:28.26]多少次我凝望远方
[02:31.51]幻想你的独影摇曳
[02:35.50]你飘逸的身影
[02:38.94]宛若是一只香殒的蝴蝶
[02:43.03]你赤红的凋落埋葬了
[02:46.72]一季相思的誓约
[02:52.33]多少次我踏遍寒山
[02:55.87]寻觅你的多情笑靥
[03:00.07]多少次我凝望远方
[03:03.36]幻想你的独影摇曳
[03:07.35]你飘逸的身影
[03:10.84]宛若是一只香殒的蝴蝶
[03:14.93]你赤红的凋落埋葬了
[03:18.62]一季相思的誓约
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts[index] = getLrcObj(parts[index]);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts[0].substr(1);
var timeParts = time.split(":");
var seconds = +timeParts[1];
var min = +timeParts[0];
seconds = min * 60 + seconds;
var words = twoParts[1];
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray[index].words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray[index].seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script> |
|
发表于 2024-10-29 13:19:32
发表于 2024-10-29 14:26:35
发表于 2024-10-29 14:59:00
