请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<style>
#pa {
margin: 20px auto;
width: 1024px ;
height: 640px;
border: 1px solid gray;
display: grid;
place-items: center;
position: relative;
}
#wrapper {
position: absolute;
padding: 10px;
font: bold 2rem/1.2 sans-serif;
text-shadow: 1px 1px 1px gray;
bottom: 20px;
}
.char {
display: inline-block;
padding: 0 2px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 0.3s var(--delay) forwards;
}
audio { position: absolute; left: 20px; top: 20px; }
@keyframes fadeIn {
to {
transform: translate(0, 0);
opacity: 1;
}
}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3319366184" controls autoplay></audio>
<div id="wrapper">HUACHAO LRC</div>
</div>
<script>
const gc = `[00:00.600]王睿卓 - 花田错\n[00:09.28]我犯了错\n[00:17.76]夜好深了 纸窗里怎么亮着\n[00:20.57]那不是 彻夜等候 你为我点的烛火\n[00:24.41]不过是 一次邂逅 红楼那一场梦\n[00:28.16]我的山水 全部褪色 像被大雨洗过\n[00:31.92]杯中景色鬼魅 我忘了我是谁\n[00:35.62]心情就像夜凉如水\n[00:38.65]手里握着蝴蝶杯 单飞 不醉不归\n[00:45.98]花田里犯了错\n[00:47.25]说好 破晓前忘掉\n[00:52.60]花田里犯了错\n[00:56.81]拥抱 变成了煎熬\n[01:00.74]花田里犯了错\n[01:01.88]犯错像迷恋镜花水月的无聊\n[01:06.91]花田里犯了错\n[01:10.18]请原谅我多情的打扰\n[01:31.84]醉 怎么会喝醉\n[01:34.89]美 因为你的美\n[01:36.81]爱匆匆一瞥不过点缀\n[01:39.73]飞 看大雪纷飞\n[01:42.00]却 再也找不回\n[01:44.48]被白雪覆盖那些青翠\n[01:47.54]当时空成为拥有你\n[01:49.84]唯一条件 我又醉\n[01:54.11]琥珀色的月 结了霜的泪\n[01:58.53]我会记得这段岁月\n[02:01.89]花田里犯了错\n[02:03.68]说好 破晓前忘掉\n[02:08.20]花田里犯了错\n[02:10.42]拥抱 变成了煎熬\n[02:16.07]花田里犯了错\n[02:17.34]犯错像迷恋镜花水月的无聊\n[02:22.59]花田里犯了错\n[02:24.85]请原谅我多情的打扰\n[02:31.98]我的山水全部褪了色\n[02:34.68]多情的打扰请原谅我\n[02:38.16]不是彻夜为我点的火\n[02:42.38]在那花田里我犯了错\n[02:45.66]我的山水全部褪了色\n[02:49.70]多情的打扰请原谅我\n[02:52.94]不是彻夜为我点的火\n[02:56.10]在那花田里我犯了错\n[02:59.56]花田里犯了错\n[03:00.62]说好 破晓前忘掉\n[03:06.35]花田里犯了错\n[03:08.13]拥抱 变成了煎熬\n[03:13.47]花田里犯了错\n[03:15.01]犯错像迷恋镜花水月的无聊\n[03:20.74]花田里犯了错\n[03:22.45]请原谅我多情的打扰\n[03:35.29]我犯了错`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr[curkey][0]) {
const gap = gcAr[curkey + 1]?.[0] ?? 0 - gcAr[curkey][0];
showLrc(gcAr[curkey][1], wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
lrcAr.push([tmsg, result[4].trim()]);
}
});
return lrcAr ? lrcAr : [0, 'HUACHAO'];
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr[j][0]) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr[curkey + 1]?.[0] ?? 0 - gcAr[curkey][0];
isSeeking = false;
showLrc(gcAr[curkey][1], wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(16).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
| 
发表于 2025-12-3 08:14
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-12-3 10:50
发表于 2025-12-3 10:53
发表于 2025-12-3 11:24
发表于 2025-12-3 14:51
