逆流成河

马黑黑 发表于 2022-6-8 13:05

本帖最后由马黑黑于 2022-6-8 13:14 编辑 <br /><br /><style>
.mama {
left: -214px; padding: 10px; width: 1024px; height: 560px;
background: radial-gradient(100% 225% at 100% 0%, #FAFF00 0%, #000000 100%),
linear-gradient(235deg, #FF7A00 0%, #000000 100%),
linear-gradient(20deg, #241E92 0%, #241E92 30%, #5432D3 calc(30% + 1px), #5432D3 35%, #7B6CF6 calc(35% + 1px),
#7B6CF6 50%, #E5A5FF calc(50% + 1px), #E5A5FF 100%),
linear-gradient(120deg, #110133 0%, #110133 40%, #00918E calc(40% + 1px), #00918E 60%, #4DD599 calc(60% + 1px), #4DD599 70%, #FFDC34 calc(70% + 1px), #FFDC34 100%);
background-blend-mode: overlay, hard-light, overlay, normal;
border: 1px dotted gold; position: relative; }
.leaf { position: absolute; left: 80%; top: 10%;width: 200px; height: 200px; border-radius: 0 100%; background: linear-gradient(45deg, gold, green); transform-origin: 0 100%; }
#lrcDiv_outer { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #CCC; border-radius: 6px; cursor: pointer; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; user-select: none;}
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightgreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
.meter { position: absolute; top: 40px; width: 100px; transform: translate(-60px, -2px) rotate(-90deg); cursor: pointer; }
</style>

<div class="mama">
<div id="lrcDiv_outer">
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
<div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
</div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1313363069.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let slip = 0.25; //误差补救单位秒
let lrcAr = [
['0.82','逆流成河'],
['4.75','演唱 : 金南玲'],
['6.50','作词 : 廖伟志'],
['8.00','作曲 : 廖伟志'],
['9.34','编曲：刘旭阳'],
['12.61','斑驳的夜色在说什么'],
['16.69','谁能告诉我如何选择'],
['20.69','每当我想起分离时刻'],
['24.87','悲伤就逆流成河'],
['29.35','你给的温暖属于谁呢'],
['33.33','谁又会在乎我是谁呢'],
['37.18','每当我想起你的选择'],
['41.59','悲伤就逆流成河'],
['62.18','失去了你也是种获得'],
['66.40','一个人孤单未尝不可'],
['70.60','每当我深夜辗转反侧'],
['74.76','悲伤就逆流成河'],
['78.95','离开你也是一种快乐'],
['82.86','没人说一定非爱不可'],
['87.13','想问你双手是否温热'],
['91.19','悲伤就逆流成河'],
['95.50','我想是因为我太天真'],
['99.58','难过是因为我太认真'],
['103.71','每当我想起你的眼神'],
['107.67','悲伤就逆流成河'],
['128.53','斑驳的夜色在说什么'],
['132.53','谁能告诉我如何选择'],
['136.75','每当我想起分离时刻'],
['140.84','悲伤就逆流成河'],
['145.23','你给的温暖属于谁呢'],
['149.14','谁又会在乎我是谁呢'],
['153.25','每当我想起你的选择'],
['157.45','悲伤就逆流成河'],
['161.78','离开你也是一种快乐'],
['165.65','没人说一定非爱不可'],
['169.91','想问你双手是否温热'],
['174.00','悲伤就逆流成河'],
['178.30','我想是因为我太天真'],
['182.18','难过是因为我太认真'],
['186.35','每当我想起你的眼神'],
['190.53','悲伤就逆流成河'],
['194.71','悲伤就逆流成河'],
['202.97','-end-']
];

for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}

Array.from({length: 5}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'leaf';
ele.style.transform = 'rotate(' + key * 72 + 'deg) translateY(100px)';
document.querySelector('.mama').appendChild(ele);
});

aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
meter.value = prog;
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'lightgreen';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'gold';
}
}
})

aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightgreen';
lrcUl.style.top = 0;
})

lrcUl.onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦油发表于 2022-6-8 13:06

本帖最后由梦油于 2022-6-8 14:50 编辑

欣赏佳作，问候黑黑。

马黑黑 发表于 2022-6-8 13:14

梦油发表于 2022-6-8 13:06
欣赏佳作，问候队长。

队长不是我，我不是队长{:5_117:}

梦油发表于 2022-6-8 14:50

马黑黑发表于 2022-6-8 13:14
队长不是我，我不是队长

哦！对不起，打错了。

红影发表于 2022-6-8 15:02

黑黑太厉害了，完全没图片的纯代码做的底图。这配色真漂亮。还有纯代码的叶片，太美了{:4_199:}

红影发表于 2022-6-8 15:04

看到代码，这个LRC是黑黑牌的LRC制作，还加入了时间误差调整，仔细看了歌词，非常完美的时间匹配，真的太棒了{:4_199:}

红影发表于 2022-6-8 15:07

不知道我做歌词lrc时的误差是多少，应该比黑黑的.25还大点吧。或者说不熟悉的歌曲可能比这个数值更大，熟悉的歌曲说不定比这个值还小点{:4_173:}

岩新新 发表于 2022-6-8 15:34

欣赏点赞！

小辣椒 发表于 2022-6-8 16:36

黑黑这个真正的歌词同步了{:4_178:}

小辣椒 发表于 2022-6-8 16:38

我歌词编辑器也是会误差的，这个真是完全一致的，厉害{:4_178:}

马黑黑 发表于 2022-6-8 18:10

本帖最后由马黑黑于 2022-6-8 22:09 编辑

梦油发表于 2022-6-8 14:50
哦！对不起，打错了。
打错队长木有关系{:4_170:}

马黑黑 发表于 2022-6-8 18:12

红影发表于 2022-6-8 15:02
黑黑太厉害了，完全没图片的纯代码做的底图。这配色真漂亮。还有纯代码的叶片，太美了

这个背景是国际大佬做的开源范例，我自己做的话没有那么好

马黑黑 发表于 2022-6-8 18:13

小辣椒发表于 2022-6-8 16:38
我歌词编辑器也是会误差的，这个真是完全一致的，厉害

我在帖子里引入了误差机制。lrc歌词制作程序也将引入处理误差的机制吧

马黑黑 发表于 2022-6-8 18:13

小辣椒发表于 2022-6-8 16:36
黑黑这个真正的歌词同步了

理论上还是有一定的误差的

闲言不语 发表于 2022-6-8 20:30

这是黑牌LRC编辑器{:4_199:}

马黑黑 发表于 2022-6-8 20:38

闲言不语发表于 2022-6-8 20:30
这是黑牌LRC编辑器

{:5_106:}

闲言不语 发表于 2022-6-8 20:42

马黑黑发表于 2022-6-8 20:38

抓紧时间申请专利

马黑黑 发表于 2022-6-8 20:53

闲言不语发表于 2022-6-8 20:42
抓紧时间申请专利

没有专利，不保留任何权限，放心使用

闲言不语 发表于 2022-6-8 20:56

马黑黑发表于 2022-6-8 20:53
没有专利，不保留任何权限，放心使用

真高风亮节！要不俺去申请，利润5：5{:4_172:}

马黑黑 发表于 2022-6-8 20:57

闲言不语发表于 2022-6-8 20:56
真高风亮节！要不俺去申请，利润5：5

同意，不过我放弃分成，全归你吧{:4_170:}

页: [1] 2 3 4

花潮论坛's Archiver

逆流成河