简单
本帖最后由 亚伦影音工作室 于 2026-6-4 15:21 编辑 <br /><br /><style>#papa { margin: 10px -300px ; width: 1186px; height: 620px;background:#800000; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; z-index: 10000; display: grid; place-items: center; overflow:hidden;border-radius: 0px 0px;}
.lrc-wrap {
position: relative;
width: 960px;
height: auto;
left: 0px;
top: 50px;
text-align: center;
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
letter-spacing: 6px;
white-space: nowrap;
font-weight:100;font-size:3.5em;
font-family:"方正舒体","SimHei", "Arial", "sans-serif";
}
@keyframes fadeIn {0% {filter: hue-rotate(360deg)brightness(180%)contrast(200%)drop-shadow(#000 1px 0 0) drop-shadow(#000 0 1px 0) drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);opacity: 1; }}
.lrc-wrapspan{opacity: 1; color:#00aa00;transition: color 0.12s ease, text-shadow 0.1s ease;}
.lrc-wrap span.active {color:#ff0000;opacity: 1;animation: fadeIn 1.5sforwards;}
</style>
<div id="papa">
<audio id="audio" src="https://dlink.host/1drv/aHR0cHM6Ly8xZHJ2Lm1zL3UvYy8xOTY1YjJiMTY1NmMyYWY2L0lRQ0Z5QV9WU0ZzY1Q3ZWt1TXhqMXdNbEFUbTBYRENDVHNQXzJaN1RuUjBXaVpZP2U9akFjUVhq" autoplay loop controls ></audio>
<div class="lrc-wrap" id="lrcWrap"></div>
</div>
<script>
const audio = document.getElementById('audio');
const lrcWrap = document.getElementById('lrcWrap');
const xmhy = `你怎么说 - 韩宝仪
我没忘记你忘记我
连名字你都说错
证明你一切都是在骗我
看今天你怎么说
你说过两天来看我
一等就是一年多
三百六十五个日子不好过
你心里根本没有我
把我的爱情还给我
我没忘记你忘记我
连名字你都说错
证明你一切都是在骗我
看今天你怎么说
你说过两天来看我
一等就是一年多
三百六十五个日子不好过
你心里根本没有我
把我的爱情还给我
你说过两天来看我
一等就是一年多
三百六十五个日子不好过
你心里根本没有我
把我的爱情还给我`;
// 解析LRC
function parseLrc(lrcText) {
const list = [];
const lines = lrcText.split('\n');
const reg = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.+)/;
lines.forEach(line => {
const m = line.match(reg);
if (!m) return;
let min = +m;
let sec = +m;
let msStr = m;
let txt = m.trim();
let ms = +msStr;
if (msStr.length === 2) ms *= 10;
let time = min * 60 + sec + ms / 1000;
if(!txt || /Music|End|☆★|编辑|谢谢/.test(txt)) return;
list.push({time, text: txt});
});
return list;
}
const lrcList = parseLrc(xmhy);
let timerList = []; // 保存所有定时器，用于拖拽时清空
let currLineIdx = -1;
function renderLine(text){
lrcWrap.innerHTML = '';
[...text].forEach(char => {
const span = document.createElement('span');
span.textContent = char;
lrcWrap.appendChild(span);
});
}
function clearAllTimer(){
timerList.forEach(t => clearTimeout(t));
timerList = [];
}
function buildTimeAxis(){
clearAllTimer();
const now = audio.currentTime;
for(let i=0; i<lrcList.length; i++){
const curr = lrcList;
const next = lrcList || {time: audio.duration};
const lineDur = next.time - curr.time;
const chars = [...curr.text];
if(next.time < now) continue;
if(curr.time <= now && next.time > now){
renderLine(curr.text);
currLineIdx = i;
const progress = Math.max(0, Math.min(1, (now - curr.time)/lineDur));
const activeCnt = Math.floor(progress * chars.length);
const spans = lrcWrap.querySelectorAll('span');
spans.forEach((s,idx)=> s.classList.toggle('active', idx <= activeCnt));
}
const lineDelay = (curr.time - now) * 1000;
if(lineDelay >= 0){
timerList.push(setTimeout(()=>{
renderLine(curr.text);
currLineIdx = i;
lrcWrap.querySelectorAll('span').forEach(s=>s.classList.remove('active'));
}, lineDelay));
}
chars.forEach((char, idx)=>{
const charTime = curr.time + (idx / chars.length) * lineDur;
const charDelay = (charTime - now) * 1000;
if(charDelay >= 0){
timerList.push(setTimeout(()=>{
const spans = lrcWrap.querySelectorAll('span');
if(spans) spans.classList.add('active');
}, charDelay));
}
});
}
}
audio.addEventListener('pause', () => {
clearAllTimer();
document.body.classList.add('animation-paused');
});
audio.addEventListener('play', () => {
buildTimeAxis();
document.body.classList.remove('animation-paused');
});
audio.addEventListener('seeked', buildTimeAxis);
audio.addEventListener('timeupdate', ()=>{
if(Math.abs(audio.currentTime - (lrcList?.time||0)) > 0.3){
buildTimeAxis();
}
});
</script> 简单中的不简单。{:5_116:}
页:
[1]