超级模仿
本帖最后由 亚伦影音工作室 于 2025-10-15 11:49 编辑 <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/689714a158cb8da5c814a178.jpg),linear-gradient(135deg, #e56420, #c22525, #3d9c31, #000078);
position: relative;
--state: running;
}
#player {position:absolute;margin: 40px 800px;
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: 26%;
height: 65%;
display: grid;
place-items: center;
clip-path: polygon(50% 0%, 80% 10%, 50% 50%, 80% 90%, 50% 100%, 20% 90%, 50% 50%, 20% 10%);
}
#rect:nth-of-type(1) { background:#000078;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ffbb00;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#ff0000;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://file.uhsea.com/2509/b7f68b41a7d496da58de78d668e545c78E.mp4" loop autoplay></audio>
<script>
player.onclick = () => audio.paused ? (audio.play(),paused) :( audio.pause(),running);
mState = () => papa.style.setProperty('--state',audio.paused ? 'paused' : 'running');
audio.onplaying = audio.onpause = () => mState();
</script>
<script>
// 歌词解析ksc歌词或lrc歌词
const lrc = `想你的时候问月亮(DJ 版)-孙艺棋
作词Lyricist: 党明毅| 一只舟
作曲Composer: 一只舟
编曲Arranger:DJ 默涵
想你的夜晚总是很漫长
萧萧的冷风还带着寒霜
远隔千里你身处在他乡
苦苦滋味我独自去品尝
问问月亮思念它有多长
你是否也会把我去守望
无法忘掉你旧时的模样
想你的心伴着淡淡忧伤
相思的泪水在不停流淌
只有默默的遥望着远方
把那相思的苦深深埋藏
等你在那曾经的老地方
亲爱的你不知现在怎样
夜深人静时是否把我想
月亮恰似你那甜美脸庞
想你的时候只能问月亮
想你的夜晚总是很漫长
萧萧的冷风还带着寒霜
远隔千里你身处在他乡
苦苦滋味我独自去品尝
问问月亮思念它有多长
你是否也会把我去守望
无法忘掉你旧时的模样
想你的心伴着淡淡忧伤
相思的泪水在不停流淌
只有默默的遥望着远方
把那相思的苦深深埋藏
等你在那曾经的老地方
亲爱的你不知现在怎样
夜深人静时是否把我想
月亮恰似你那甜美脸庞
想你的时候只能问月亮
相思的泪水在不停流淌
只有默默的遥望着远方
把那相思的苦深深埋藏
等你在那曾经的老地方
亲爱的你不知现在怎样
夜深人静时是否把我想
月亮恰似你那甜美脸庞
想你的时候只能问月亮
月亮恰似你那甜美脸庞
想你的时候只能问月亮
`;
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_191:} 本帖最后由 亚伦影音工作室 于 2025-10-15 13:59 编辑
clip-path: polygon(50% 50%, 85% 50%, 100% 100%, 50% 50%, 15% 50%, 0 0);
clip-path: polygon(0 40%, 0 0, 30% 0, 30% 40%, 70% 60%, 100% 60%, 100% 100%, 70% 100%, 70% 60%, 30% 40%);
clip-path: polygon(30% 0, 50% 50%, 100% 70%, 100% 100%, 70% 100%, 50% 50%, 0 30%, 0 0);#rect ------
width: 30%;height: 85%;
clip-path: polygon(30% 0, 54% 48%, 100% 70%, 75% 75%, 70% 100%, 54% 48%, 0 30%, 25% 25%);
欣赏佳作，问候亚伦。 制作漂亮，欣赏亚伦老师好帖{:4_199:}
页:
[1]