春色入怀来
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {
--offsetX: 80px;
--bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/03/25/69c37ec10dcd2.gif') no-repeat center/cover;
--ma-size: 12%;
width: 1400px;
height: 788px;
position: relative;
overflow: hidden;
}
/* 清除潜在水印伪元素 */
.pa *, .pa *::before, .pa *::after {
content: none !important;
}
/* 【关键修改】歌词容器样式 */
#custom-lrc-container {
position: absolute;
top: 30px; /* 保持你原来的顶部距离 */
left: 0;
width: 100%;
text-align: center;
z-index: 9999;
pointer-events: none;
/* 关键：设置一个固定高度，防止布局跳动，但内部元素绝对定位 */
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
/* 每一句歌词的样式 */
.lrc-line {
position: absolute; /* 绝对定位，让所有歌词重叠在同一位置 */
left: 50%;
transform: translateX(-50%); /* 水平居中 */
white-space: nowrap; /* 防止换行 */
color: #fefefe;
font-size: 28px; /* 字体大小 */
font-weight: bold;
text-shadow: 0 0 10px rgba(0,0,0,0.8); /* 阴影加深，确保在亮背景下可见 */
opacity: 0; /* 默认完全透明（隐藏） */
transition: opacity 0.5s ease, transform 0.5s ease; /* 淡入淡出动画 */
margin: 0;
top: 0; /* 垂直对齐顶部 */
}
/* 当前正在播放的那一句 */
.lrc-line.active {
opacity: 1; /* 变为完全不透明（显示） */
transform: translateX(-50%) scale(1.1); /* 稍微放大一点效果 */
z-index: 10;
}
</style>
<div class="pa">
<!-- 纯净的歌词容器 -->
<div id="custom-lrc-container"></div>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
// 添加音频、视频、图片等
tz.add('audio', '', '', { src: 'http://cccimg.com/view.php/33c42498c3fc426f1f5b2cfcc6795885.mp3' });
tz.add('video', '', 'pd-vid', {src: 'http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4'}).style('opacity: 0.5;');
tz.add('img', '', 'ma', { src: 'https://ff.xiaoqiaodali.top:5401/i/2026/03/04/69a8082bb8885.png' }).style('bottom: 60px;').playmp3();
tz.bgprog().style('bottom: 20px; color: #fefefe; width: 260px;');
tz.fs().style('left: 20px; top: 20px;');
const lrcString = `春色入怀来
花香扑面开
春风多自在
幸福乐开怀
幸福乐开怀
一步一步向前迈
把所有烦恼都甩开
春风十里等着你转个弯
就把你拥在怀
原来简单走一走
天也蓝得格外明白
原来停下看一看
连是风里都唱出来期待
春色如怀来
花香扑面开
春风多自在
幸福乐开怀
乐开怀
今年花儿又盛开
开在眉尖也开在心海
春暖大地多精彩
正念好日子慢慢来
春色如怀来
花香扑面开
春风多自在
幸福乐开怀`;
function initCustomLrc(lrcText) {
const container = document.getElementById('custom-lrc-container');
const lines = [];
// 解析歌词
const lineRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/;
const rawLines = lrcText.split('\n');
rawLines.forEach(text => {
const match = text.match(lineRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const milliseconds = parseInt(match);
const time = minutes * 60 + seconds + milliseconds / 1000;
const content = match.trim();
if (content) {
lines.push({ time, content, element: null });
}
}
});
// 生成 DOM：所有歌词都创建出来，但默认透明
lines.forEach((line) => {
const div = document.createElement('div');
div.className = 'lrc-line';
div.textContent = line.content;
container.appendChild(div);
line.element = div;
});
// 获取音频元素
const audio = document.querySelector('.pa audio');
if (audio) {
// 初始状态：如果还没开始播放，可以显示第一句或者全隐藏
// 这里选择全隐藏，等播放开始
audio.addEventListener('timeupdate', () => {
const currentTime = audio.currentTime;
let activeIndex = -1;
// 查找当前应该显示的歌词索引
for (let i = 0; i < lines.length; i++) {
if (currentTime >= lines.time) {
activeIndex = i;
} else {
break;
}
}
// 切换显示状态
lines.forEach((line, idx) => {
if (idx === activeIndex) {
// 当前句：显示
if (!line.element.classList.contains('active')) {
line.element.classList.add('active');
}
} else {
// 其他句：隐藏
if (line.element.classList.contains('active')) {
line.element.classList.remove('active');
}
}
});
});
// 监听播放结束，清空状态
audio.addEventListener('ended', () => {
lines.forEach(line => line.element.classList.remove('active'));
});
}
}
// 延迟初始化，确保 audio 标签已存在
setTimeout(() => {
const audioEl = document.querySelector('.pa audio');
if(audioEl) {
initCustomLrc(lrcString);
} else {
const observer = new MutationObserver(() => {
const aud = document.querySelector('.pa audio');
if(aud) {
initCustomLrc(lrcString);
observer.disconnect();
}
});
observer.observe(document.querySelector('.pa'), { childList: true, subtree: true });
}
}, 500);
</script>
效果惊艳~谢谢枫丹老师鼓励，祝开心天天{:4_204:} 杨帆 发表于 2026-3-25 15:25
效果惊艳~谢谢枫丹老师鼓励，祝开心天天
扬帆下午好~~
这首歌找不到作者，歌词。抖音上有人发了我下载后制作了这个帖子，感谢您的鼓励支持，遥祝春褀！！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-3-25 15:38
扬帆下午好~~
这首歌找不到作者，歌词。抖音上有人发了我下载后制作了这个帖子，感谢您的鼓励支持，遥 ...
厉害~制作这个动图及同步歌词挺不容易呢{:4_190:} 杨帆 发表于 2026-3-25 15:42
厉害~制作这个同步歌词挺不容易呢
昨晚我学着制作的，很多需要看教程，这是第一个帖子，先试试。我贪玩，反正没正经事请，做什么都一样。{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-3-25 15:46
昨晚我学着制作的，很多需要看教程，这是第一个帖子，先试试。我贪玩，反正没正经事请，做什么都一样。{: ...
毋容置疑，学习这些绝对是正事，您在哪看的什么教程呀？{:4_190:} 这个视频咋没效果呢？http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4 我很喜欢这个播放器。 https://st-gdx.dancf.com/gaodingx/346/design/20190904-095733-a879.gif 杨帆 发表于 2026-3-25 15:51
毋容置疑，学习这些绝对是正事，您在哪看的什么教程呀？
https://blog.csdn.net/WuLex/article/details/109702160
这个我看到多一些，DZ论坛的插件库，博客我有ID,能够登录，在哪里有些插件我没事就看看，多少的了解一些。英文我不懂，需要划词翻译，倒也能看一些。现在开源的文档挺多色，随手百度的也没留下网址。{:4_204:}{:4_190:}
杨帆 发表于 2026-3-25 15:54
这个视频咋没效果呢？http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4
用有内容的视频我总觉得对背景图片的亮度等有影响，就用一张透明图片做了个mp4,需要有内容的就替换，不需要的时候就是空白项。
梦油 发表于 2026-3-25 16:46
我很喜欢这个播放器。
就是做着玩打发时间，复杂的我也不会{:4_173:}谢梦老的支持！下午好~~{:4_204:}{:4_190:}
也曾年轻 发表于 2026-3-25 16:57
感谢也曾年轻的支持，下午好！！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-3-25 17:25
https://blog.csdn.net/WuLex/article/details/109702160
这个我看到多一些，DZ论坛的插件库，博客我 ...
是，太多也看不过来，主要看适合自己的精品，谢谢枫丹老师用心推荐{:4_180:} 霜染枫丹 发表于 2026-3-25 17:29
用有内容的视频我总觉得对背景图片的亮度等有影响，就用一张透明图片做了个mp4,需要有内容的就替换，不需 ...
挺有创意呢，欣赏学习了~{:4_204:} 这首曲子挺好听呢，收入我刚发的专辑了，谢谢枫丹老师{:4_180:} 杨帆 发表于 2026-3-25 18:16
这首曲子挺好听呢，收入我刚发的专辑了，谢谢枫丹老师
这首歌是前几天出现的，都是几十秒，就在抖音上发现了我下载的，2分多钟，挺好听的，歌词提取的我修正了一下，最后的“入“写成了“如“，在这里我也不敢修改了。
霜染枫丹 发表于 2026-3-25 18:32
这首歌是前几天出现的，都是几十秒，就在抖音上发现了我下载的，2分多钟，挺好听的，歌词提取的我修正了 ...
最后的“入“写成了“如“？没注意呢，谢谢枫丹老师辛勤制作、用心分享{:4_180:}
霜染枫丹 发表于 2026-3-25 17:31
就是做着玩打发时间，复杂的我也不会谢梦老的支持！下午好~~
你年轻时一定更聪明。 梦油 发表于 2026-3-25 19:42
你年轻时一定更聪明。
哈哈~~梦老过誉了。我就是贪玩，现在也没有什么事需要我琢磨，那就用心的玩吧，也算是锻炼大脑一条途径。{:4_173:}{:4_204:}{:4_190:}
页:
[1]
2