晚秋-黄凯芹[ksc歌词]
本帖最后由 亚伦影音工作室 于 2025-8-17 14:25 编辑 <br /><br /><style>#bj { position: relative;
width: 1280px;
height: 720px;
margin-left: -300px;
margin-top: 140px;
overflow: hidden;z-index:12345;
}
.intro {margin: 0px0px;z-index:2;background:#55aa33 url(https://pic1.imgdb.cn/item/639c856fb1fccdcd36dc3f59.jpg)no-repeat center/cover;
width: 100%;
height:100%;
position: absolute;
background-size: cover;
background-blend-mode: multiply;
animation: hue-rotate 3s linear infinite;
}
@keyframes hue-rotate{50%{filter:hue-rotate(360deg)contrast(200%)brightness(110%);}}
#balloonCanvas{ z-index:3;
pointer-events: none;
position: absolute;overflow: hidden;
left:0;top: 0px;
}
.lyrics{margin: 0;z-index: 6;
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;
}
#bfq{
position:absolute;
width: 450px;
height:350px;overflow: hidden;
background:#0000;
transform:scale(0.6);bottom: 58%;
left:65%;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);}
</style>
<divid="bj">
<div class='intro'></div>
<div id="bfq">
<div id="cz"class="pink"></div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<canvas id="balloonCanvas" ></canvas>
<div class="lyrics" >
<div class="lyric-line">
<div class="lyric-mask"></div>
<div class="lyric-original"></div>
</div>
</div>
</div>
<audio id="audio" src="https://www.oldkids.cn/upload/2025/08/17/blog_260855907_20250817141140156.mp3" autoplay loop></audio>
<script>
const balloonCanvas = document.getElementById('balloonCanvas');
const balloonCtx = balloonCanvas.getContext('2d');
balloonCtx.imageSmoothingEnabled = true;
let mouseX = 0;
let mouseY = 0;
let isMouseMoving = false;
const balloons = [];
const balloonColors = [
'red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink'
];
const balloonSizeRange = ;
balloonCanvas.width = window.innerWidth;
balloonCanvas.height = window.innerHeight;
document.addEventListener('mousemove', function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
isMouseMoving = true;
const speed = calculateMouseSpeed(event);
const balloonCount = Math.min(Math.floor(speed * 1), 2);
for (let i = 0; i < balloonCount; i++) {
createBalloon();
}
setTimeout(() => {
isMouseMoving = false;
}, 200);
});
document.addEventListener('click', function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
for (let i = 0; i < 3; i++) {
createBalloon(true);
}
});
const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
images.addEventListener('click', function() {
balloons.forEach(balloon => {
const angle = Math.random() * Math.PI * 2;
const speed = (Math.random() * 5 + 3);
balloon.vx = Math.cos(angle) * speed;
balloon.vy = Math.sin(angle) * speed;
});
});
}
let lastX = 0, lastY = 0, lastTime = 0;
function calculateMouseSpeed(event) {
const now = Date.now();
const timeDiff = (now - lastTime) / 1000;
lastTime = now;
if (timeDiff === 0) return 0;
const dx = event.clientX - lastX;
const dy = event.clientY - lastY;
const distance = Math.sqrt(dx * dx + dy * dy);
lastX = event.clientX;
lastY = event.clientY;
return distance / timeDiff;
}
function createBalloon(isClick = false) {
const color = balloonColors;
const sizeMultiplier = isClick ? 1.2 : 1;
const speedMultiplier = isClick ? 1.2 : 1;
const angle = Math.random() * Math.PI * 2;
const speed = (Math.random() * 2 + 1) * speedMultiplier;
const balloon = {
x: mouseX,
y: mouseY,
radiusX: Math.random() * balloonSizeRange + balloonSizeRange * sizeMultiplier,
radiusY: (Math.random() * 0.5 + 1) * (Math.random() * balloonSizeRange + balloonSizeRange * sizeMultiplier), // 闀垮渾褰㈢姸
color: color,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
life: Math.random() * 80 + 50, decay: Math.random() * 0.02 + 0.01,
brightness: 500
};
balloons.push(balloon);
}
function createFallingBalloon() {
const color = balloonColors;
const radiusX = Math.random() * balloonSizeRange + balloonSizeRange;
const radiusY = (Math.random() * 0.5 + 1) * (Math.random() * balloonSizeRange + balloonSizeRange); // 闀垮渾褰㈢姸
const balloon = {
x: Math.random() * balloonCanvas.width,
y: 0,
radiusX: radiusX,
radiusY: radiusY,
color: color,
vx: (Math.random() - 0.5) * 2,
vy: Math.random() * 2 + 1,
life: Math.random() * 80 + 50,
decay: Math.random() * 0.02 + 0.01,
brightness: 1
};
balloons.push(balloon);
}
for (let i = 0; i < 3; i++) {
createFallingBalloon();
}
function update() {
balloonCtx.clearRect(0, 0, balloonCanvas.width, balloonCanvas.height);
if (!isMouseMoving) {
balloons.forEach(balloon => {
const randomFactor = Math.random() * 0.1 + 1;
balloon.vx *= 1.05 * randomFactor;
balloon.vy *= 1.05 * randomFactor;
});
}
for (let i = balloons.length - 1; i >= 0; i--) {
const balloon = balloons;
balloon.x += balloon.vx;
balloon.y += balloon.vy;
balloon.vx *= 0.98;
balloon.vy *= 0.98;
balloon.brightness -= balloon.decay;
balloon.life--;
if (balloon.x - balloon.radiusX < 0) {
balloon.x = balloon.radiusX;
balloon.vx = -balloon.vx * 0.8;
}
if (balloon.x + balloon.radiusX > balloonCanvas.width) {
balloon.x = balloonCanvas.width - balloon.radiusX;
balloon.vx = -balloon.vx * 0.8;
}
if (balloon.y - balloon.radiusY < 0) {
balloon.y = balloon.radiusY;
balloon.vy = -balloon.vy * 0.8;
}
if (balloon.y + balloon.radiusY > balloonCanvas.height) {
balloon.y = balloonCanvas.height - balloon.radiusY;
balloon.vy = -balloon.vy * 0.8;
}
if (balloon.life <= 0 || balloon.brightness <= 0) {
balloons.splice(i, 1);
} else {
drawBalloon(balloon);
}
}
requestAnimationFrame(update);
}
function drawBalloon(balloon) {
balloonCtx.shadowColor = 'rgba(0, 0, 0, 0.3)';
balloonCtx.shadowBlur = 5;
balloonCtx.shadowOffsetX = 2;
balloonCtx.shadowOffsetY = 2;
const gradient = balloonCtx.createRadialGradient(
balloon.x, balloon.y, 0,
balloon.x, balloon.y, Math.max(balloon.radiusX, balloon.radiusY)
);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
gradient.addColorStop(0.2, 'rgba(0, 0, 0, 0)');
gradient.addColorStop(1, balloon.color);
balloonCtx.beginPath();
balloonCtx.ellipse(balloon.x, balloon.y, balloon.radiusX, balloon.radiusY, 0, 0, Math.PI * 2);
balloonCtx.fillStyle = gradient;
balloonCtx.fill();
balloonCtx.beginPath();
balloonCtx.ellipse(balloon.x, balloon.y, balloon.radiusX, balloon.radiusY, 0, 0, Math.PI * 2);
balloonCtx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
balloonCtx.lineWidth = 1;
balloonCtx.stroke();
balloonCtx.shadowColor = 'rgba(0, 0, 0, 0)';
}
update();
window.addEventListener('resize', function() {
balloonCanvas.width = window.innerWidth;
balloonCanvas.height = window.innerHeight;
});
</script>
<script>
// 歌词解析ksc歌词或lrc歌词
const lrc = `karaoke.add('00:00.000', '00:08.708', '晚秋-黄凯芹', '622,622,622,622,622,622,622,622,622,622,622,622,622,622');
karaoke.add('00:08.710', '00:16.958', '词：许建强', '1742,1742,1742,1742,1280');
karaoke.add('00:17.420', '00:25.668', '曲：许建强', '1742,1742,1742,1742,1280');
karaoke.add('00:26.134', '00:29.794', '曾停留风里看着多少的晚秋', '90,180,190,320,340,300,370,330,380,340,410,410');
karaoke.add('00:31.904', '00:36.034', '如何能跟你说别潇洒的远走', '170,140,180,240,320,350,410,350,370,260,450,890');
karaoke.add('00:38.144', '00:42.694', '含愁凝望你 要分手是时候', '320,350,330,340,1370,170,250,370,340,370,340');
karaoke.add('00:43.704', '00:47.454', '那心间多少泪水未让流', '190,390,430,250,310,440,420,270,500,550');
karaoke.add('00:49.264', '00:53.204', '何时能解开心中多少苦与忧', '160,150,190,270,320,340,410,360,410,230,450,650');
karaoke.add('00:55.014', '00:59.194', '何时能解释心中空虚的借口', '180,140,180,260,340,350,410,370,370,310,440,830');
karaoke.add('01:01.294', '01:05.873', '情谜围住我 你此际又回眸', '320,410,340,310,1360,180,320,369,340,260,370');
karaoke.add('01:06.953', '01:10.983', '问情怀可永久相拥有', '160,350,710,310,340,390,350,400,1020');
karaoke.add('01:12.913', '01:16.993', '朦胧缠着那份爱万缕', '300,360,340,250,450,400,360,340,1280');
karaoke.add('01:18.803', '01:22.763', '明晨离别盼望爱仍留', '210,320,280,250,500,420,400,300,1280');
karaoke.add('01:24.483', '01:29.193', '共你常一对 相爱结伴随', '340,350,320,320,1270,280,710,280,390,450');
karaoke.add('01:30.223', '01:34.343', '却总怕醒觉随梦走', '190,230,330,340,360,750,670,1250');
karaoke.add('01:58.790', '02:02.630', '何时能解开心中多少苦与忧', '200,160,160,220,320,350,380,350,380,350,380,590');
karaoke.add('02:04.500', '02:08.740', '何时能解释心中空虚的借口', '140,140,200,300,350,300,400,330,420,280,470,910');
karaoke.add('02:10.800', '02:15.460', '情谜围住我你此际又回眸', '340,340,330,280,1430,180,320,370,320,290,460');
karaoke.add('02:16.350', '02:20.760', '问情怀可永久相拥有', '200,360,750,330,300,420,350,420,1280');
karaoke.add('02:22.390', '02:25.879', '朦胧缠着那份爱万缕', '310,360,320,200,480,390,370,380,679');
karaoke.add('02:28.252', '02:32.252', '明晨离别盼望爱仍留', '210,360,320,230,550,410,310,330,1280');
karaoke.add('02:34.072', '02:38.632', '共你常一对 相爱结伴随', '220,330,340,260,1310,270,720,280,430,400');
karaoke.add('02:39.652', '02:43.821', '却总怕醒觉随梦走', '150,240,370,290,489,670,680,1280');
karaoke.add('02:45.171', '02:49.091', '何时能解开心中多少苦与忧', '170,150,170,240,380,270,450,260,380,370,380,700');
karaoke.add('02:50.871', '02:55.141', '何时能解释心中空虚的借口', '80,170,210,270,350,350,380,370,400,210,440,1040');
karaoke.add('02:57.091', '03:01.731', '情谜围住我你此际又回眸', '350,400,330,400,1290,190,270,380,310,360,360');
karaoke.add('03:02.751', '03:06.921', '问情怀可永久相拥有', '190,360,670,260,430,370,370,410,1110');
karaoke.add('03:08.681', '03:13.401', '唯求原谅我恕失敬别离后', '350,450,270,340,1390,190,290,340,360,350,390');
karaoke.add('03:14.361', '03:21.411', '未回头因已经心伤透', '180,320,1390,410,930,500,640,1450,1230')
`;
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>
<script>
cp.onclick = cz.onclick = () => audio.paused ? (audio.play(), cz.classList.remove('purple'),intro.style.animationPlayState = 'running',cp.style.animationPlayState = 'running') : (audio.pause(),cz.classList.add('purple'),intro.style.animationPlayState = 'paused',cp.style.animationPlayState = 'paused');
const intro= document.querySelector('.intro');
</script>
播放器制作大气 歌曲太棒了~我听的都醉了~
好听｀好听｀给我签个名吧！就签俺衣服上吧！要带唇印的哦~~
播放器精彩，好棒哦，辛苦亚伦影音工作室了！
播放器的真棒~谢谢亚伦影音工作室带来的精彩～！
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
野百荷★╰☆╮水仙花╰☆╮紫丁香╰☆╮【*偶然 献花给你啦】 下次偷去做个翻唱，再次感谢亚伦影音工作室 漂亮的标色音画。同步高亮歌词，鼠标移动还会带动起很多飘飞的粒子。
欣赏亚伦老师{:4_199:} 漂亮，谢谢亚伦老师精彩分享{:4_190:}
页:
[1]