举杯敬自己
本帖最后由 亚伦影音工作室 于 2025-10-19 08:47 编辑 <br /><br /><style>#papa {margin: 20px -300px;
width: 1286px;
height: 720px;
border: 0px solid gray;
background:radial-gradient(ellipse farthest-corner at center center, transparent 38%,#000 90%),url(https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg),linear-gradient(135deg, #e56420, #c22525, #3d9c31, #000078);
position: relative;
--state: running;
}
#player {position:absolute;top: 10%;
left: 10%;
width: 300px;
height: 300px;
display: grid;
place-items: center;
animation: rot 8s linear infinite var(--state);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
width: 30%;
height: 30%;
display: grid;
place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);
}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
.lyrics{margin: 0;z-index: 20;
top: 89%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px; /* 调整高度，只容纳当前歌词 */
text-align: center;
position: absolute;
}
.lyric-line{
width: 100%;
position: relative;
height: 60px;
overflow: visible;
font: 300 50px '华文隶书', sans-serif;
line-height: 60px;
text-align: left;
white-space: nowrap; /* 禁止换行 */
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);
}
.lyric-mask {
position: absolute;
top: 0;
left: 0;
width: 0;
overflow: hidden;
color: #8B4513;
height: 100%;
white-space: nowrap;
}
.lyric-original {
color: #ag0000;
white-space: nowrap;
}
</style>
<div id="papa">
<div class="lyrics" >
<div class="lyric-line">
<div class="lyric-mask"></div>
<div class="lyric-original"></div>
</div>
</div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
</div>
<audio id="audio" src="https://www.kkkkmmmm.com/wj/175453/2023/11/20/98f41ba3435232e24060270b032c3939.mp3" loop autoplay></audio>
<script>
player.onclick = () => audio.paused ? (audio.play(),player.style.top= '0',player.style.left = '0',player.style.transform = '') :( audio.pause(),player.style.top= '20%' ,player.style.left= '72%',player.style.transform = 'scale(0.5)' );
mState = () => papa.style.setProperty('--state',audio.paused ? 'paused' : 'running');
audio.onplaying = audio.onpause = () => mState();
</script>
<script>
// 歌词解析ksc歌词或lrc歌词
const lrc = `举杯敬往后-王超然
词：苗子
曲：灰色幽默
统筹：千夜
营销推广：千寻文化
OP/SP：千寻文化
举起酒杯敬往后
时光匆匆不停留
不怕起起落落一切再从头
昨夜的伤挥挥手
未来的路还要走
生死以外都是小事别犯愁
举起酒杯敬往后
但愿余生再无忧
至那前尘往事已经难回首
细数一生几个秋
千滋百味品尝够
不枉美好人世这一游
举起酒杯敬往后
时光匆匆不停留
不怕起起落落再从头
昨夜的伤挥挥手
未来的路还要走
生死以外都是小事别犯愁
举起酒杯敬往后
好好活着已足够
命里该有该无不强求
错过的人别念旧
人间不过幅蜃楼
几十年后终究化为乌有
举起酒杯敬往后
但愿余生再无忧
至那前尘往事已经难回首
细数一生几个秋
千滋百味品尝够
不枉美好人世这一游
举起酒杯敬往后
时光匆匆不停留
不怕起起落落再从头
昨夜的伤挥挥手
未来的路还要走
生死以外都是小事别犯愁
举起酒杯敬往后
好好活着已足够
命里该有该无不强求
错过的人别念旧
人间不过幅蜃楼
几十年后终究化为乌有
举起酒杯敬往后
时光匆匆不停留
不怕起起落落再从头
昨夜的伤挥挥手
未来的路还要走
生死以外都是小事别犯愁
`;
const audio = document.getElementById('audio');
const lyrics = parseLyrics(lrc);
const lyricMask = document.querySelector('.lyric-mask');
const lyricOriginal = document.querySelector('.lyric-original');
let currentIndex = -1;
let currentLyric = null;
// 解析歌词（支持两种格式）
function parseLyrics(lrcText) {
const lyrics = [];
if (lrcText.includes('karaoke.add')) {
const lineRegex = /karaoke\.add\('([^']+)', '([^']+)', '([^']+)', '([^']+)'\);/g;
let match;
while ((match = lineRegex.exec(lrcText)) !== null) {
const startTime = timeToMs(match);
const endTime = timeToMs(match);
const text = match.replace(/\[|\]/g, '').trim();
const durations = match.split(',').map(Number);
if (text) {
lyrics.push({startTime, endTime, text, durations});
}
}
}
else if (lrcText.includes('[')) {
const lines = lrcText.split('\n').filter(line => line.trim());
lines.forEach((line, index) => {
const timeMatch = line.match(/\[(\d+:\d+\.\d+)\]/);
if (timeMatch) {
const timeStr = timeMatch;
const text = line.replace(/\[.*?\]/, '').trim();
if (text) {
const startTime = timeToMs(timeStr);
const nextLine = lines;
const nextTimeMatch = nextLine ? nextLine.match(/\[(\d+:\d+\.\d+)\]/) : null;
const endTime = nextTimeMatch ? timeToMs(nextTimeMatch) : startTime + 5000;
lyrics.push({
startTime,
endTime,
text,
durations: calculateCharDurations(text, startTime, endTime)
});
}
}
});
}
return lyrics;
}
function calculateCharDurations(text, startTime, endTime) {
const totalDuration = endTime - startTime;
const charCount = text.length;
const baseDur = Math.floor(totalDuration / charCount);
const durations = new Array(charCount).fill(baseDur);
const remainder = totalDuration % charCount;
for (let i = 0; i < remainder; i++) {
durations++;
}
return durations;
}
function timeToMs(timeStr) {
const parts = timeStr.split(':');
const minutes = parseInt(parts, 10);
const secondsAndMs = parts.split('.');
const seconds = parseInt(secondsAndMs, 10);
const ms = parseInt(secondsAndMs || 0, 10);
return minutes * 60 * 1000 + seconds * 1000 + ms;
}
function getCurrentLyricIndex(lyrics, currentTimeMs) {
for (let i = 0; i < lyrics.length; i++) {
if (currentTimeMs >= lyrics.startTime && currentTimeMs <= lyrics.endTime) {
return i;
}
}
return -1;
}
function updateLyricDisplay(index) {
if (index < 0 || index >= lyrics.length) return;
currentIndex = index;
currentLyric = lyrics;
lyricOriginal.textContent = currentLyric.text;
lyricMask.textContent = currentLyric.text;
lyricMask.style.width = '0%';
}
function updateLyricMask(currentTimeMs) {
if (!currentLyric) return;
const lyricStartTime = currentLyric.startTime;
const elapsed = currentTimeMs - lyricStartTime;
const totalDuration = currentLyric.durations.reduce((sum, d) => sum + d, 0);
let charIndex = 0;
let accumulatedTime = 0;
for (let i = 0; i < currentLyric.durations.length; i++) {
accumulatedTime += currentLyric.durations;
if (elapsed <= accumulatedTime) {
charIndex = i + 1;
break;
}
}
if (elapsed >= totalDuration) {
charIndex = currentLyric.text.length;
}
charIndex = Math.min(charIndex, currentLyric.text.length);
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
tempSpan.style.fontSize = '50px';
tempSpan.style.fontWeight = '800';
document.body.appendChild(tempSpan);
const visibleText = currentLyric.text.substring(0, charIndex);
tempSpan.textContent = visibleText;
const width = tempSpan.offsetWidth;
document.body.removeChild(tempSpan);
lyricMask.style.width = `${width}px`;
}
// 监听更新歌词
audio.addEventListener('timeupdate', () => {
const currentTimeMs = audio.currentTime * 1000;
const index = getCurrentLyricIndex(lyrics, currentTimeMs);
if (index !== currentIndex) {
updateLyricDisplay(index);
}
updateLyricMask(currentTimeMs);
});
updateLyricDisplay(0);
</script> 背景制作好漂亮，变色小播也好美。
欣赏亚伦老师好帖{:4_199:}
页:
[1]