《我敬苍天酒一壶》——搬运（编辑改动）了了子老师的《聚光灯扫描歌词播放器》.
本帖最后由 寒冬残荷 于 2026-4-13 14:29 编辑 <br /><br /><style>.pa {width: 1600px; height: 900px;background: #ffffff; overflow: auto; font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; display: flex; justify-content: center; align-items: center; padding: 20px; margin:50px auto 90px calc(50% - 881px);box-shadow:3px 3px 20px #000; position:relative; }
.fixed-player-container { width: 100%; height: 100%; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0px 0px 2px 1px #191970; background:#191970; margin: 0 auto; }
.video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; cursor: default; }
.background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; filter: brightness(1.1) saturate(1.5); }
.video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#videoTop { z-index: 2; filter: brightness(1.0) saturate(1.3); opacity: 1; mix-blend-mode: screen; }
#videoBottom { z-index: 1; filter: brightness(1.5) contrast(1.0) saturate(1.5); opacity: 0.7; mix-blend-mode: screen; margin-top: -250px;}
.video-error { opacity: 0 !important; }
.player-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
.play-control-btn { position: absolute; top: 20px; right: 45px; z-index: 50; pointer-events: auto; background: #0a0a0a; border: 1px solid rgba(255, 215, 0, 0.8); border-radius: 8px; padding: 8px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7); min-width: 120px; justify-content: center; }
.play-control-btn:hover { background: #1a0a0a; border-color: rgba(255, 215, 0, 1); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8); }
.play-control-btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
/* .play-icon { color: #ff6b6b; font-size: 16px; font-weight: bold; text-shadow: 0 0 8px rgba(255, 107, 107, 0.7); } */
.play-text { color: #ff6b6b; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 6px rgba(255, 107, 107, 0.5); }
.play-control-btn.stopped { color: #ffd700; }
.play-control-btn.stopped .play-text { color: #ffd700; }
.lyrics-container { position: absolute; bottom: 100px; left: 0; width: 100%; z-index: 30; text-align: center; pointer-events: none; }
.lyric-text { position: relative; font-size: 2.2rem; font-weight: 400; letter-spacing: 2px; color: #3a3a3a; margin: 0 auto; line-height: 1.4; text-shadow: 0 2px 8px rgba(0,0,0,0.6); transform: perspective(1em) rotateX(14deg); transform-origin: center bottom; transform-style: preserve-3d; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)) drop-shadow(0 5px 10px rgba(0,0,0,0.3)); padding: 0.3em 0.8em; white-space: nowrap; box-shadow: 0 0 20px rgba(255, 220, 150, 0.3); color: transparent; width: 900px; display: inline-block; }
.lyric-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #ffffff; text-shadow: 0 0 12px #ffb347, 0 0 25px #ffa500, 0 0 40px rgba(255, 165, 0, 0.6); pointer-events: none; -webkit-font-smoothing: antialiased; transform-style: preserve-3d;
clip-path: ellipse(300px 180px at -10% 50%); animation: spotlightGlide 8s linear infinite alternate; mix-blend-mode: lighten; transform: translateZ(1px); will-change: clip-path; }
.lyric-text.stopped::after { animation-play-state: paused; color: transparent; text-shadow: none; }
.lyric-text::before { content: attr(data-text); position: absolute; top: 2px; left: 2px; width: 100%; height: 100%; color: rgba(0, 0, 0, 0.35); z-index: -1; transform: translateZ(-2px); }
@keyframes spotlightGlide { 0% { clip-path: ellipse(300px 180px at -10% 50%); } 100%{ clip-path: ellipse(300px 180px at 110% 50%);} }
#lyricsCanvas { display: none; }
.time-display-center { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; z-index: 40; font-family: 'Microsoft YaHei', monospace; font-size: 14px; font-weight: bold; letter-spacing: 2px; pointer-events: none; white-space: nowrap; background: transparent; padding: 8px 20px; border-radius: 50px; opacity: 0.8; textShadow: 0 0 1px #8b0000, 0 0 2px #8b0000, 0 0 3px #8b0000, 0 0 4px #8b0000, 0 0 20px currentColor, 0 0 40px currentColor; }
.audio-error-note { position: absolute; top: 80px; left: 0; width: 100%; text-align: center; background: rgba(0,0,0,0.75); color: #ffdd99; padding: 8px 20px; border-radius: 40px; z-index: 40; font-size: 0.9rem; pointer-events: none; border: 1px solid #ffaa55; }
.spotlight-indicator { position: absolute; top: 4%; left: 0; width: 100%; text-align: center; font-size: 2.2rem; color: #ffffff; opacity: 0.95; filter: drop-shadow(0 0 18px #ffaa44); pointer-events: none; z-index: 26; animation: lightPulse 2s infinite alternate; white-space: nowrap; text-shadow: 1px 1px 0 darkred, -1px 1px 0 darkred, 1px -1px 0 darkred, -1px -1px 0 darkred, 0 0 12px rgba(255, 200, 100, 0.8); }
.spotlight-indicator.stopped { animation-play-state: paused; opacity: 0.6; filter: drop-shadow(0 0 8px #ffaa44); }
@keyframes lightPulse { 0% { opacity: 0.6; transform: scale(0.95); } 100% { opacity: 0.95; transform: scale(1.05); } }
@media (max-width: 1350px) {.fixed-player-container
{ width: 95vw; height: calc(95vw * 0.554); max-width: 1300px; max-height: 720px; }
.lyric-text { width: 750px; font-size: 2rem; }
.lyric-text::after { clip-path: ellipse(240px 150px at -10% 50%); }
@keyframes spotlightGlide { 0% { clip-path: ellipse(240px 150px at -10% 50%); } 100%{ clip-path: ellipse(240px 150px at 110% 50%);} }
}
@media (max-width: 768px) {.lyric-text
{ width: 90vw; max-width: 500px; font-size: 1.8rem; padding: 0.2em 0.5em; white-space: normal; }
.lyric-text::after { clip-path: ellipse(200px 130px at -10% 50%); }
.spotlight-indicator { font-size: 1.8rem; top: 10%; }
.play-control-btn { top: 15px; right: 15px; padding: 6px 12px; min-width: 100px; }
/* .play-icon { font-size: 14px; } */
.play-text { font-size: 12px; }
@keyframes spotlightGlide { 0% { clip-path: ellipse(200px 130px at -10% 50%); } 100%{ clip-path: ellipse(200px 130px at 110% 50%);} }
}
</style>
<div class="pa">
<div class="fixed-player-container">
<div class="video-container" id="videoContainer">
<video id="videoTop" autoplay loop muted playsinline>
<source src="https://img1.oldkids.cn/upload/2026/04/13/blog_260802952_20260413101313416.mp4" type="video/mp4">
</video>
<video id="videoBottom" autoplay loop muted playsinline>
<source src="https://img.tukuppt.com/video_show/2629112/00/01/41/5b42c26db4cba.mp4" type="video/mp4">
</video>
</div>
<div class="player-overlay">
<div class="play-control-btn" id="playControlBtn">
<span class="play-text">停止音乐</span>
</div>
<div class="lyrics-container">
<div class="lyric-text" id="currentLyric" data-text="音乐欣赏"></div>
</div>
<canvas id="lyricsCanvas"></canvas>
<div class="spotlight-indicator" id="spotlightIndicator">✦ 我敬苍天酒一壶 — 阿美呀 ✦</div>
<div id="timeDisplayCenter" class="time-display-center">00:00 / 00:00</div>
<div id="audioErrorNote" class="audio-error-note" style="display:none;">音频加载失败，请刷新页面重试</div>
</div>
<audio id="audioPlayer" preload="metadata" style="display: none;" src="https://img4.oldkids.cn/upload/2026/04/13/blog_260802952_20260413105452997.mp3" loop>
</div>
</div>
<script>
(function() {
const videoTop = document.getElementById('videoTop');
const videoBottom = document.getElementById('videoBottom');
const audio = document.getElementById('audioPlayer');
const audioErrorNote = document.getElementById('audioErrorNote');
const timeDisplay = document.getElementById('timeDisplayCenter');
const currentLyricElement = document.getElementById('currentLyric');
const playControlBtn = document.getElementById('playControlBtn');
//const playIcon = playControlBtn.querySelector('.play-icon');
const playText = playControlBtn.querySelector('.play-text');
const spotlightIndicator = document.getElementById('spotlightIndicator');
// 视频地址
const SING_VIDEO = "https://img1.oldkids.cn/upload/2026/04/13/blog_260802952_20260413101313416.mp4";
const QUIET_VIDEO = "https://img4.oldkids.cn/upload/2026/04/13/blog_260802952_20260413112806501.mp4";
let lastLyricIndex = -1;
let isPlaying = true;
let lastVideoSrc = "";
function handleVideoError(v) { v.classList.add('video-error'); }
videoTop.addEventListener('error', () => handleVideoError(videoTop));
videoBottom.addEventListener('error', () => handleVideoError(videoBottom));
if (videoTop.error) handleVideoError(videoTop);
if (videoBottom.error) handleVideoError(videoBottom);
.forEach(v => v.play().catch(e => {}));
const lrcText = `《我敬苍天酒一壶》
词：战十七
曲：李俊佑
歌手：阿美呀
那往事化如烟那遗憾藏心间
剩故事翻篇思念在盘旋
无数个深夜难眠
半生苦楚漂泊流年
心上故人无法再见
风霜渐渐刻满少年的脸
我敬苍天酒一壶敬岁月万般苦
敬往后余生有个归宿
敬这坎坷人生路敬命运不服输
再敬我来路一身尘土
我敬苍天酒一壶敬岁月万般苦
敬人海茫茫悲喜自渡
敬我走过的荒芜敬余生皆幸福
最后敬往事杯中沉浮
谢谢聆听
那往事化如烟那遗憾藏心间
剩故事翻篇思念在盘旋
无数个深夜难眠
半生苦楚漂泊流年
心上故人无法再见
风霜渐渐刻满少年的脸
我敬苍天酒一壶敬岁月万般苦
敬往后余生有个归宿
敬这坎坷人生路敬命运不服输
再敬我来路一身尘土
我敬苍天酒一壶敬岁月万般苦
敬人海茫茫悲喜自渡
敬我走过的荒芜敬余生皆幸福
最后敬往事杯中沉浮
我敬苍天酒一壶敬岁月万般苦
敬往后余生有个归宿
敬这坎坷人生路敬命运不服输
再敬我来路一身尘土
我敬苍天酒一壶敬岁月万般苦
敬人海茫茫悲喜自渡
敬我走过的荒芜敬余生皆幸福
最后敬往事杯中沉浮
谢谢聆听
`;
function parseLrc(text) {
const lines = text.split('\n');
const result = [];
const regex = /\[(\d+):(\d+\.\d+)\](.*)/;
lines.forEach(line => {
const match = line.match(regex);
if (match) {
const min = parseInt(match, 10);
const sec = parseFloat(match);
const time = min * 60 + sec;
let content = match.trim();
if (content) result.push({ time, text: content });
}
});
result.sort((a, b) => a.time - b.time);
return result;
}
const lyrics = parseLrc(lrcText);
// 视频切换函数
function switchTopVideo(src) {
if (lastVideoSrc === src) return;
lastVideoSrc = src;
videoTop.src = src;
videoTop.load();
if (isPlaying) videoTop.play().catch(() => {});
}
// ====================== 核心：多段时间切换视频 ======================
function updateVideoByTime(currentTime) {
const isQuietTime =
(currentTime >= 0 && currentTime < 16.35) || // 前奏
(currentTime >= 70.15 && currentTime < 83.04) || // 01:10.15 - 01:23.04
(currentTime >= 163.51 && currentTime < 185.00); // 02:43.51 - 03:05.00
if (isQuietTime) {
switchTopVideo(QUIET_VIDEO);
} else {
switchTopVideo(SING_VIDEO);
}
}
// ==================================================================
function setLyricText(text) {
if (!text) text = "";
currentLyricElement.setAttribute('data-text', text);
}
function updateLyricForTime(currentTime) {
let idx = lyrics.findIndex(l => l.time > currentTime);
if (idx === -1) idx = lyrics.length;
const currentIndex = idx - 1;
if (currentIndex < 0) { setLyricText(''); return; }
if (currentIndex === lastLyricIndex) return;
lastLyricIndex = currentIndex;
setLyricText(lyrics.text);
}
function formatTime(seconds) {
if (isNaN(seconds)) return '00:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
function updateTimeDisplay() {
if (!audio.duration) return;
timeDisplay.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
}
function updatePlayButtonState() {
if (isPlaying) {
playIcon.textContent = '❚❚';
playText.textContent = '停止音乐';
playControlBtn.classList.remove('stopped');
currentLyricElement.classList.remove('stopped');
spotlightIndicator.classList.remove('stopped');
} else {
playIcon.textContent = '▶';
playText.textContent = '点击播放';
playControlBtn.classList.add('stopped');
currentLyricElement.classList.add('stopped');
spotlightIndicator.classList.add('stopped');
}
}
function togglePlay() {
if (isPlaying) {
audio.pause();
videoTop.pause();
videoBottom.pause();
} else {
audio.play().catch(e => {
console.error('播放失败:', e);
audioErrorNote.style.display = 'block';
});
videoTop.play().catch(()=>{});
videoBottom.play().catch(()=>{});
}
isPlaying = !isPlaying;
updatePlayButtonState();
}
let timeHue = 0;
function updateTimeColor() {
timeDisplay.style.color = `hsl(${timeHue}, 90%, 70%)`;
timeDisplay.style.textShadow =
`0 0 1px #8b0000, 0 0 2px #8b0000, 0 0 3px #8b0000, 0 0 4px #8b0000, 0 0 20px hsl(${timeHue}, 80%, 70%), 0 0 40px hsl(${timeHue}, 80%, 60%)`;
}
playControlBtn.addEventListener('click', togglePlay);
audio.addEventListener('play', () => {
isPlaying = true;
updatePlayButtonState();
videoTop.play().catch(()=>{});
videoBottom.play().catch(()=>{});
});
audio.addEventListener('pause', () => {
isPlaying = false;
updatePlayButtonState();
videoTop.pause();
videoBottom.pause();
});
audio.addEventListener('timeupdate', () => {
updateTimeDisplay();
updateLyricForTime(audio.currentTime);
updateVideoByTime(audio.currentTime);
});
audio.addEventListener('loadedmetadata', updateTimeDisplay);
audio.addEventListener('error', () => {
audioErrorNote.style.display = 'block';
});
audio.addEventListener('canplay', () => {
audioErrorNote.style.display = 'none';
});
audio.addEventListener('ended', () => {
setLyricText('');
isPlaying = false;
updatePlayButtonState();
});
window.addEventListener('load', () => {
setLyricText(lyrics?.text || "音乐");
audio.load();
setTimeout(() => {
audio.play().catch(e => {
console.error('自动播放失败:', e);
isPlaying = false;
updatePlayButtonState();
});
}, 600);
});
function colorLoop() {
timeHue = (timeHue + 0.3) % 360;
updateTimeColor();
requestAnimationFrame(colorLoop);
}
colorLoop();
})();
</script>
最近眼睛不舒服，看屏幕痛，手机和电脑都很少玩了。今天忍不住上网逛逛，看到了了子老师的精美帖子，喜欢聚光灯扫描歌词的效果，忍不住拿老师的来编辑制作此帖。在此谢谢了了子老师！
https://5b0988e595225.cdn.sohucs.com/images/20180208/ffe7e9e85b3d4cbf8e0f771c15364af2.gif 漂亮~谢谢寒冬残荷版主精彩分享{:4_204:} 好漂亮的制作，欣赏寒冬残荷好帖{:4_199:} 寒冬残荷 发表于 2026-4-13 14:25
最近眼睛不舒服，看屏幕痛，手机和电脑都很少玩了。今天忍不住上网逛逛，看到了了子老师的精美帖子，喜欢 ...
不舒服就要多休息，别继续加重眼睛的负担{:4_187:} 寒冬残荷 发表于 2026-4-13 14:25
最近眼睛不舒服，看屏幕痛，手机和电脑都很少玩了。今天忍不住上网逛逛，看到了了子老师的精美帖子，喜欢 ...
漂亮，谢谢版主精彩分享。祝你健康快乐！{:4_187:} 也曾年轻 发表于 2026-4-13 16:22
老师，傍晚好！感谢你的光临！
老师，我用你帖子中介绍的使用酷狗MP3地址的方法不得了呢。所以现在很难找到能外链的mp3地址。这个帖子的mp3是我上传获得的地址，发帖要这样就太麻烦了…… 杨帆 发表于 2026-4-13 18:44
漂亮~谢谢寒冬残荷版主精彩分享
谢谢杨帆版主的鼓励支持！ 红影 发表于 2026-4-13 21:35
好漂亮的制作，欣赏寒冬残荷好帖
谢谢红影管管的鼓励支持！ 梦江南 发表于 2026-4-14 11:19
漂亮，谢谢版主精彩分享。祝你健康快乐！
谢谢梦江南老师的鼓励和关心！ 寒冬残荷 发表于 2026-4-15 18:52
老师，傍晚好！感谢你的光临！
老师，我用你帖子中介绍的使用酷狗MP3地址的方法不得了呢。所以现在很 ...
就是因为现成的歌曲链接难找现在基本不想做音画帖了{:5_102:}
网易云音乐的外链相对容易获得只不好站内搜索。
寒冬残荷 发表于 2026-4-15 18:53
谢谢红影管管的鼓励支持！
不客气啊，还有，叫我影子吧，大家都是玩，没什么管不管的呢{:4_173:}
页:
[1]