霜染枫丹 发表于 2026-3-31 12:51
就是歌词不显示了，其他没影响
这就怪了。
本帖最后由 霜染枫丹 于 2026-3-31 23:51 编辑 <br /><br /><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/30/69ca90ad3368c.gif') no-repeat center/cover;
--ma-size: 12%;
width: 1500px;
height: 844px;
position: relative;
overflow: hidden;
}
.pa *, .pa *::before, .pa *::after {
content: none !important;
}
/* 【修复全屏问题】改用 bottom 定位，永远贴在底部 */
#custom-lrc-container {
position: absolute;
bottom: 15px; /* 关键：距离底部 50px，全屏不变，可修改 */
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-family: "隶书", "LiSu", serif;
font-weight: normal;
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/f83fc4874be4ad557bd79173de922b86.mp3' });
tz.add('video', '', 'pd-vid', {src: 'http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4'}).style('opacity: 0.2;');
tz.add('img', '', 'ma', { src: 'https://ff.xiaoqiaodali.top:5401/i/2026/03/30/69ca96dae054f.png' }).style('bottom: 60px;').playmp3();
tz.bgprog().style('bottom: 20px; color: #fefefe; width: 240px;');
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;
let content = match.trim();
// 【关键修复】过滤乱码 等所有 HTML 实体
content = content.replace(/&#\d+;/g, '').trim();
if (content) {
lines.push({ time, content, element: null });
}
}
});
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) {
line.element.classList.add('active');
} else {
line.element.classList.remove('active');
}
});
});
audio.addEventListener('ended', () => {
lines.forEach(line => line.element.classList.remove('active'));
});
}
}
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>
也曾年轻 发表于 2026-3-31 12:58
这就怪了。
我也是弄不明白，
上面我发了经过您指点后添加了一行代码的代码，拖油瓶没有了，都正常显示了{:4_204:}{:4_190:}
好像歌词前后的确有特殊符合，不知怎么回事。
这制作很漂亮，欣赏枫丹好帖{:4_187:}
ai美女好看就闪了一下视频失效了
歌曲舒缓，午安
[ 本帖最后由 也曾年轻 于 2026-3-31 15:16 编辑 ]\n\n
现在应该是搞清楚歌词不显示问题所在了{:5_106:}
for (let i = 0; i < lines.length; i++) {
if (currentTime >= lines.time) {
activeIndex = i;
} else {
break;
}
}
问题就出在这段代码的循环变量上，当帖子代码任一处被修改后论坛就会把 解释为<i>,于是这段代码就出错了，歌词就不显示了。
解决这问题有两个方法：1. 用其它字符做循环变量， 如 j；2. 附加选项中选中“禁用编辑器代码”。
红影 发表于 2026-3-31 14:17
好像歌词前后的确有特殊符合，不知怎么回事。
这制作很漂亮，欣赏枫丹好帖
红影下午好~~
我也弄不清原因，在以前也出现过，我没在意，这回在意了，它还不走了{:4_173:}，我是先发在家园网，都正常，在这里发就出现了，然后就赖着不走了，再中画网我试了一下，和这里一样。也曾年轻在帮着找原因，可高兴了{:4_189:}{:4_204:}{:4_190:}
柳云烟 发表于 2026-3-31 14:31
ai美女好看就闪了一下视频失效了
歌曲舒缓，午安
欢迎柳云烟，下午好~~
背景是通过视频制作的GIF图片，显示在我这里一直很正常。若是网速慢会出现这样的状态，一会儿可能就正常了。这些东东我不懂，就是照虎画猫。
感谢您的支持，遥祝春褀！{:4_204:}{:4_190:}
也曾年轻 发表于 2026-3-31 15:04
[ 本帖最后由 也曾年轻 于 2026-3-31 15:16 编辑 ]\n\n
现在应该是搞清楚歌词不显示问题所在了
...
谢谢也曾年轻！我记住了，我采用方案，现在就制作一个。特别感谢~~
霜染枫丹 发表于 2026-3-31 15:46
谢谢也曾年轻！我记住了，我采用方案，现在就制作一个。特别感谢~~
不修改就不会出这问题
也曾年轻 发表于 2026-3-31 15:59
不修改就不会出这问题
是的，我就是忘记了点击了编辑。有办法解决就太好了，，免得以后又忘记了导致情景重现。{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-3-31 16:06
是的，我就是忘记了点击了编辑。有办法解决就太好了，，免得以后又忘记了导致情景重现。{:4_190 ...
这帖没在中画那边发吧，在那边还有个表情的问题。
也曾年轻 发表于 2026-3-31 16:24
这帖没在中画那边发吧，在那边还有个表情的问题。
我在中画网自己的那个水帖里发了，我记住了那边的勾选{:4_173:}{:4_190:}
霜染枫丹 发表于 2026-3-31 17:00
我在中画网自己的那个水帖里发了，我记住了那边的勾选
霜染枫丹 发表于 2026-3-31 09:37
我按找您说的进行了修改，也把歌词显示改了一下，添加了content = content.replace(/&#\d+;/g, '').tri ...
我去中画看了挺好的，没有拖油瓶呵{:4_189:}，可能是论坛设置不同吧。
放剪映里过一下看看能不能去掉{:4_190:}
本帖最后由 霜染枫丹 于 2026-3-31 22:27 编辑
樵歌 发表于 2026-3-31 20:22
我去中画看了挺好的，没有拖油瓶呵，可能是论坛设置不同吧。
小樵哥晚上好！
虽然都是DZ论坛，可大家选用的模板不一样，不同的人设计了不同布局的模板，导致在使用时会用一些差别。都是正常范围内{:4_173:}{:4_204:}{:4_190:}
https://www.yueyijyw.com/data/attachment/forum/202603/31/222546fmli33zoomcolmel.png
https://www.yueyijyw.com/data/attachment/forum/202603/31/222332rq1jsh6e69pq6zy9.jpg
樵歌 发表于 2026-3-31 20:23
放剪映里过一下看看能不能去掉
我的理解剪影是工具软件，制作出来是MP4 文件，也可以是软件能力能导出的其他后缀的文件。播放器是互联网执行代码。是否可以我不知道，没做过。
霜染枫丹 发表于 2026-3-31 15:37
红影下午好~~
我也弄不清原因，在以前也出现过，我没在意，这回在意了，它还不走了，我是先 ...
嗯嗯，也曾年轻很懂，有他帮忙是最好了，我反正是不懂的{:4_173:}
红影 发表于 2026-4-1 21:28
嗯嗯，也曾年轻很懂，有他帮忙是最好了，我反正是不懂的
谢红影的关照！这个问题解决了，心情很好！{:4_204:}{:4_190:}