心碎红颜泪【翁奕童苑提供ksc歌词】
本帖最后由 亚伦影音工作室 于 2025-10-9 12:05 编辑 <br /><br /><style>#bj {
position: relative;
width: 1286px;
height: 680px;
margin-left: -300px;
margin-top: 120px;
overflow: hidden;
background: url(https://pic1.imgdb.cn/item/639c84a6b1fccdcd36db2be7.jpg) no-repeat center / cover, linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde);
}
.intro {margin: 0px0px;
width: 100%;
height:100%;
position: absolute;
background: url(https://pic1.imgdb.cn/item/639c84a6b1fccdcd36db2be7.jpg)no-repeat center / cover, linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 10s linear infinite;
}
@keyframes hue-rotate {5%{ transform:scale(1); opacity: 1;filter: hue-rotate(0deg);}20%{ transform:scale(1); opacity: 1;filter: hue-rotate(360deg);}100%{ transform:scale(8);opacity: 0;filter: hue-rotate(0deg);}}
.lrc {
position: absolute;
width: 500px;
height: 400px;
top: 50%;
left: 20%;
transform: translate(-50%, -50%); /* 容器整体居中 */
overflow: hidden;
text-align: center;
}
.lrc #ul {
width: 100%;
padding: 0;
list-style: none;
transition: 0.1s all ease;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.lrc #ul li {filter:drop-shadow(#000 1px 1px 0px)drop-shadow(#000 1px 1px 0px);
color: #66ff66;
font: 500 25px 'FZYaoti', sans-serif;
transition: 0.1s all ease;
list-style-type: none;
text-align: center;
padding: 0 0px;
height: 60px;
line-height:60px;
cursor: pointer;
white-space: nowrap; /* 防止歌词换行 */
}
.lrc #ul li span {
margin: 0 5px;
transform-origin: center center; /* x轴和y轴均以中心为原点 */
transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数让动画更自然 */
display: inline-block; /* 确保transform-origin生效 */
}
.lrc #ul li span.active {
font: 500 25px 'FZYaoti', sans-serif;
color:#ff0000;
transform: scale(1.2)rotateZ(-360deg) translateY(-22%);/* 缩放效果 */
}
#bfq{
position:absolute;
width: 450px;
height:350px;overflow: hidden;
background:#0000;
transform:scale(.4);bottom: -100px;
left: -120px;z-index: 20;}
#cp{
position:absolute;
width: 240px;border-radius: 50%;
height:240px;animation: rotating 6s infinite linear;
top:18%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
cursor: pointer;
left: 12%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 50%;
top: 50%; transform: translate(-50%, -50%);
position: absolute;
width: 238px;
height: 238px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 2px #444;
background:#880000 url('') no-repeat center / cover;
border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #ccc;
border-radius: 50%;
}
#cz {position: absolute;
top:6%; left:45%;z-index: 2;
width: 150px;background: url('https://pic1.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/85%;
height: 300px;
cursor: pointer;
}
.pink { transform:rotate(5deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: -4px -18px;transform:rotate(-9deg);}
#prog {position: absolute;z-index: 8;
width: 78%;
height: 2px;background:#ccc;
cursor: pointer;
bottom: 46px;
left:12%;
border-radius: 1px;}
#prog-bar {
height: 100%;
background: #FF0000;
width: 0%;
}
#tmsg {position: absolute;z-index: 8;
font: normal 12px sans-serif;
color: #ffffff;
bottom: 42px;
right: 40px;}
</style>
<div id="bj">
<div class='intro'></div>
<div class="lrc">
<ul id="ul"></ul>
</div>
<div id="bfq">
<div id="cz"class="pink"></div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="tmsg">00:00|00:00</div>
</div>
</div>
<audio id="audio" src="https://s2.cldisk.com/sv-w7/audio/16/e3/3b/41cedfd769cd8ac8def99cd0d83c13c3/audio.mp3" loop autoplay></audio>
<script>
var lrc = `karaoke.add('00:02.791', '00:05.756', '心碎红颜泪', '469,552,400,496,1048');
karaoke.add('00:05.756', '00:11.116', '词/王佳瑜 曲/冷雨', '488,544,472,480,480,480,464,464,464,1024');
karaoke.add('00:11.116', '00:14.252', '演唱/陈瑞', '616,472,504,464,1080');
karaoke.add('00:24.393', '00:30.361', '送我的玫瑰早已经枯萎', '231,200,1369,240,952,232,368,824,624,928');
karaoke.add('00:30.361', '00:36.321', '给你的信件是否化成了灰', '256,224,736,720,744,336,416,688,328,432,1080');
karaoke.add('00:36.777', '00:42.209', '或许你和我没有错与对', '392,520,295,289,1384,336,408,368,424,1016');
karaoke.add('00:42.209', '00:48.177', '只是缘聚缘又散你我奔南北', '319,368,465,328,344,296,1224,376,416,352,400,1080');
karaoke.add('00:48.193', '00:53.721', '当初的诺言卸下了防备', '240,280,616,768,992,232,344,752,616,688');
karaoke.add('00:54.053', '01:00.158', '转过身以后添了几分伤悲', '272,248,896,441,963,289,416,832,552,216,1080');
karaoke.add('01:00.358', '01:05.973', '爱情的旅程谁落下了热泪', '592,376,440,368,823,632,552,288,328,336,1080');
karaoke.add('01:05.841', '01:11.768', '一场梦酒一杯经过几轮回', '232,320,703,361,375,1224,648,456,256,416,936');
karaoke.add('01:11.768', '01:14.480', '在这个世界上', '224,304,752,304,416,712');
karaoke.add('01:14.480', '01:17.472', '还有谁懂红颜泪', '352,360,776,232,264,336,672');
karaoke.add('01:17.472', '01:20.401', '红颜哭红颜美', '368,392,760,272,441,696');
karaoke.add('01:20.401', '01:23.433', '红颜始终为爱憔悴', '312,368,392,352,240,184,352,832');
karaoke.add('01:23.433', '01:26.392', '把你的好记在心里', '296,344,575,496,208,240,224,576');
karaoke.add('01:26.392', '01:29.352', '爱你的心永不悔', '296,272,184,576,272,600,760');
karaoke.add('01:29.352', '01:33.776', '就算伤痛全给了也一个人背', '336,368,344,272,376,200,192,240,544,232,240,1080');
karaoke.add('01:35.528', '01:38.192', '在这个世界上', '248,304,664,264,440,744');
karaoke.add('01:38.192', '01:41.201', '还有谁懂红颜泪', '337,416,487,353,288,392,736');
karaoke.add('01:41.201', '01:44.088', '红颜痴红颜醉', '311,321,720,303,473,759');
karaoke.add('01:44.088', '01:47.136', '红颜心碎是为了谁', '376,312,400,256,224,168,424,888');
karaoke.add('01:47.136', '01:50.120', '一段情一生铭记', '320,400,736,248,240,320,720');
karaoke.add('01:50.120', '01:53.008', '不怕雨打和风吹', '280,344,512,312,327,393,720');
karaoke.add('01:53.008', '01:57.809', '是否有人懂得红颜的心碎', '361,328,335,360,312,480,345,359,369,472,1080');
karaoke.add('02:00.408', '02:06.920', '字幕制作/亚伦音画', '696,720,552,496,672,616,648,528,504,1080');
karaoke.add('02:22.960', '02:28.576', '当初的诺言卸下了防备', '224,232,816,624,768,320,392,792,696,752');
karaoke.add('02:28.576', '02:34.504', '转过身以后添了几分伤悲', '360,384,680,761,663,377,384,375,1073,208,663');
karaoke.add('02:34.726', '02:40.638', '爱情的旅程谁落下了热泪', '1112,192,408,344,1280,240,248,376,328,440,944');
karaoke.add('02:40.638', '02:46.145', '一场梦酒一杯经过几轮回', '272,352,671,344,384,784,808,808,248,336,500');
karaoke.add('02:46.452', '02:49.333', '在这个世界上', '281,295,849,288,408,760');
karaoke.add('02:49.333', '02:52.293', '还有谁懂红颜泪', '344,391,737,224,200,312,752');
karaoke.add('02:52.293', '02:55.221', '红颜哭红颜美', '376,408,751,273,399,721');
karaoke.add('02:55.221', '02:58.251', '红颜始终为爱憔悴', '368,311,368,296,209,311,353,814');
karaoke.add('02:58.251', '03:01.227', '把你的好记在心里', '322,326,496,296,296,248,304,688');
karaoke.add('03:01.227', '03:04.212', '爱你的心永不悔', '353,312,376,328,600,240,776');
karaoke.add('03:04.212', '03:08.948', '就算伤痛全给了也一个人背', '313,319,337,328,336,240,184,480,327,385,407,1080');
karaoke.add('03:10.373', '03:12.989', '在这个世界上', '232,272,640,304,432,736');
karaoke.add('03:12.989', '03:16.028', '还有谁懂红颜泪', '368,360,560,296,272,344,839');
karaoke.add('03:16.028', '03:18.908', '红颜痴红颜醉', '272,400,768,296,424,720');
karaoke.add('03:18.975', '03:21.936', '红颜心碎是为了谁', '289,336,343,281,343,248,329,792');
karaoke.add('03:21.936', '03:24.904', '一段情一生铭记', '336,328,800,232,200,312,760');
karaoke.add('03:24.904', '03:27.888', '不怕雨打和风吹', '320,336,312,353,344,456,863');
karaoke.add('03:27.888', '03:32.648', '是否有人懂得红颜的心碎', '337,311,329,328,281,439,400,520,327,408,1080');
karaoke.add('03:33.912', '03:36.696', '在这个世界上', '280,344,704,336,400,720');
karaoke.add('03:36.696', '03:39.656', '还有谁懂红颜泪', '376,384,536,328,248,384,704');
karaoke.add('03:39.656', '03:42.552', '红颜哭红颜美', '344,432,736,320,416,648');
karaoke.add('03:42.552', '03:45.617', '红颜始终为爱憔悴', '400,345,383,241,287,313,328,768');
karaoke.add('03:45.617', '03:48.608', '把你的好记在心里', '344,384,384,336,312,248,296,687');
karaoke.add('03:48.608', '03:51.568', '爱你的心永不悔', '368,272,328,344,328,552,768');
karaoke.add('03:51.568', '03:56.248', '就算伤痛全给了也一个人背', '336,352,360,264,328,272,344,264,320,336,424,1080');
karaoke.add('03:57.491', '04:00.419', '在这个世界上', '320,321,752,312,423,800');
karaoke.add('04:00.419', '04:03.419', '还有谁懂红颜泪', '344,399,273,536,312,352,784');
karaoke.add('04:03.419', '04:06.331', '红颜痴红颜醉', '312,400,712,320,384,784');
karaoke.add('04:06.331', '04:09.395', '红颜心碎是为了谁', '344,272,360,296,264,328,352,848');
karaoke.add('04:09.395', '04:12.339', '一段情一生铭记', '320,352,776,240,304,240,712');
karaoke.add('04:12.339', '04:15.299', '不怕雨打和风吹', '312,328,328,432,336,424,800');
karaoke.add('04:15.299', '04:20.170', '是否有人懂得红颜的心碎', '320,321,327,360,368,376,360,600,288,471,1080');
karaoke.add('04:37.861', '04:40.445', '谢谢欣赏', '504,488,512,1080');
`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#audio"),
ul = document.querySelector("#ul"),
container = document.querySelector(".lrc");
const lrcRegex = /karaoke\.add\('([\d:/.]+)',\s*'([\d:/.]+)',\s*'([^']*)'/;
for (let i = 0; i < lrcArr.length; i++) {
const line = lrcArr.trim();
if (!line) continue;
const match = line.match(lrcRegex);
if (!match) continue;
const startTimeStr = match;
const endTimeStr = match;
const lineText = match.trim();
if (!lineText) continue;
const startTime = parseTime(startTimeStr);
const endTime = parseTime(endTimeStr);
const lineDuration = endTime - startTime;
const words = lineText.split('');
const wordCount = words.length;
if (wordCount === 0) continue;
const wordDuration = lineDuration / wordCount;
const lineWords = [];
words.forEach((word, index) => {
lineWords.push({
time: startTime + index * wordDuration,
text: word
});
});
result.push(lineWords);
}
function parseTime(timeStr) {
const = timeStr.split(':');
return parseInt(minutes, 10) * 60 + parseFloat(seconds);
}
function getCurrentLineIndex() {
const currentTime = audio.currentTime;
for (let i = 0; i < result.length; i++) {
const line = result;
if (currentTime >= line.time &&
(i === result.length - 1 || currentTime < result.time)) {
return i;
}
}
return -1;
}
function createLyricElements() {
const frag = document.createDocumentFragment();
result.forEach((lineWords, lineIndex) => {
const li = document.createElement("li");
lineWords.forEach(wordObj => {
const span = document.createElement("span");
span.textContent = wordObj.text;
span.dataset.time = wordObj.time;
li.appendChild(span);
});
li.addEventListener('click', () => {
audio.currentTime = lineWords.time;
});
frag.appendChild(li);
});
ul.appendChild(frag);
}
createLyricElements();
const liHeight = 60;
const visibleLines = 1;
let prevLineIndex = -1;
function syncLyric() {
const currentLineIndex = getCurrentLineIndex();
if (currentLineIndex === -1) return;
const scrollOffset = currentLineIndex * liHeight;
ul.style.transform = `translateY(-${scrollOffset}px)`;
if (prevLineIndex!== -1 && prevLineIndex!== currentLineIndex) {
const prevLi = ul.children;
if (prevLi) {
prevLi.querySelectorAll('span.active').forEach(span => {
span.classList.remove('active');
});
}
}
const currentLi = ul.children;
const currentLine = result;
const currentTime = audio.currentTime;
currentLine.forEach((wordObj, wordIndex) => {
const span = currentLi.children;
const isActive = currentTime >= wordObj.time &&
(wordIndex === currentLine.length - 1 ||
currentTime < currentLine.time);
if (isActive) {
span.classList.add('active');
} else {
span.classList.remove('active');
}
});
prevLineIndex = currentLineIndex;
}
audio.addEventListener("timeupdate", syncLyric);
</script>
<script>
audio.addEventListener('timeupdate', () => {
tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);
});
function toMin(val) {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60);
let sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth; }
var progBar = document.getElementById('prog-bar');
audio.addEventListener('timeupdate', () => {
const percent = (audio.currentTime / audio.duration) * 100;
progBar.style.width = percent + '%';
});
cp.onclick = cz.onclick = () => audio.paused ? (audio.play(), cz.classList.remove('purple'),intro.style.animationPlayState = 'running') : (audio.pause(), cz.classList.add('purple'),intro.style.animationPlayState = 'paused');
cp.style.animationPlayState = audio.paused ? 'paused' : 'running';
audio.addEventListener('playing', () => cp.style.animationPlayState = 'running');
audio.addEventListener('pause', () => cp.style.animationPlayState = 'paused');
const intro= document.querySelector('.intro');
</script> KSC歌词 心碎红颜泪--演唱/陈瑞 为亚伦音画特制|老小孩讲述
漂亮！谢谢亚伦老师精彩分享{:4_191:} 制作漂亮，变色背景很美，歌词同步也很美。{:4_204:}
歌曲好像有问题，在1:57歌曲有跳跃，2；34秒进行到歌曲结束音，2:56歌曲开始的歌词可以对应，之前的歌词无法对应呢。 欣赏亚伦老师好帖{:4_199:}
页:
[1]