2024年6月18日 星期二
<style>
#tz { margin: 20px auto; width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/3/lose.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; z-index: 1; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; top: 15px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; text-shadow: 2px 2px 2px rgba(0,0,0,.8); background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; }
#player { left: 30px; top: 30px; width: 160px; height: 160px; filter: drop-shadow(0 0 50px white); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
#player:hover { width: 200px; }
c-c { position: absolute; width: 85%; height: 30px; border: 12px double plum; border-radius: 50%; opacity: .75; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tz" data-lrc="好像失去了很多">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2013420735" autoplay loop></audio>
<div id="player"></div>
</div>
<script>
var curkey = 0, lrcAr = [], total = 8;
Array.from({length: total}).forEach((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `
transform: rotate(${360 / total * k}deg);
border-color: #${Math.random().toString(16).substring(2,8)};
`;
player.appendChild(c);
});
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(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()]);
});
};
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr[curkey][0]) {
tz.dataset.lrc = lrcAr[curkey][1];
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var lrc = `[00:00.00]苏星婕 - 好像失去了很多\n[00:18.510]分手两个字 笔画确实不多\n[00:21.510]从你口中说出只要 一秒钟就带过\n[00:25.470]脑海闪过的回忆 衬托着你的冷漠\n[00:29.360]嘴边挽留的话 还是不要再说\n[00:33.990]其实早就察觉 你的态度不如从前\n[00:37.930]早记不清 守了多少夜的空房间\n[00:41.860]也许那天风大 吹散的人不该遇见\n[00:45.850]也许我们 分开才是成全\n[00:49.020]好像失去了很多 又好像没拥有过\n[00:53.000]那些忘不掉的美好 已不属于我\n[00:56.910]其实我舍不得 只是该放手了\n[01:00.820]把眼泪擦干了 假装不难过\n[01:04.830]好像失去了很多 又好像没拥有过\n[01:08.700]那些放不下的回忆 难道是假的\n[01:12.660]如果能重来过 别再重蹈覆辙\n[01:16.540]一开始就该做个路人角色\n[01:36.990]其实早就察觉 你的态度不如从前\n[01:40.900]早记不清 守了多少夜的空房间\n[01:44.770]也许那天风大 吹散的人不该遇见\n[01:48.800]也许我们 分开才是成全\n[01:52.090]好像失去了很多 又好像没拥有过\n[01:55.930]那些忘不掉的美好 已不属于我\n[01:59.860]其实我舍不得 只是该放手了\n[02:03.750]把眼泪擦干了 假装不难过\n[02:07.830]好像失去了很多 又好像没拥有过\n[02:11.740]那些放不下的回忆 难道是假的\n[02:15.630]如果能重来过 别再重蹈覆辙\n[02:19.570]一开始就该做个路人角色\n[02:23.480]好像失去了很多 又好像没拥有过\n[02:27.390]那些忘不掉的美好 已不属于我\n[02:31.330]其实我舍不得 只是该放手了\n[02:35.240]把眼泪擦干了 假装不难过\n[02:39.270]好像失去了很多 又好像没拥有过\n[02:43.040]那些放不下的回忆 难道是假的\n[02:47.140]如果能重来过 别再重蹈覆辙\n[02:50.940]一开始就该做个路人角色`;
getAr(lrc);
</script>
| 
发表于 2024-6-17 21:05
