半夏生 共青团中央宣传部 二十四节气
本帖最后由 霜染枫丹 于 2026-5-6 08:30 编辑 <br /><br /><style>@import url('https://638183.freep.cn/638183/web/tz/tz.v4.css');
.pa {
--offsetX: 80px;
--bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/05/06/69fa870027d92.gif') no-repeat center/cover;
--ma-size: 8%;
width: 1400px;
height: 788px;
position: relative;
overflow: hidden;
}
.pa *, .pa *::before, .pa *::after {
content: none !important;
}
/* 【修复全屏问题】改用 bottom 定位,永远贴在底部 */
#custom-lrc-container {
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
text-align: center;
z-index: 9999;
pointer-events: none;
height: 50px;
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');
// ==============================================
// 【核心修复】音频必须加 muted 兼容论坛自动播放策略
// ==============================================
tz.add('audio', '', '', {
src: 'https://cccimg.com/view.php/b4a455d1fc09f2acdd605933402172e4.m4a',
muted: 'muted',
preload: 'auto'
});
tz.add('video', '', 'pd-vid', {
src: 'https://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69ba.mp4',
muted: 'muted',
preload: 'auto'
}).style('opacity: 0.2;');
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: 240px;');
tz.fs().style('left: 20px; top: 20px;');
const lrcString = `
半夏生
网易云音乐 x
共青团中央宣传部 二十四节气
「夏至」特别企划
歌手:银临
作词 : 邹念慈/申名利
作曲 : 邹念慈
无人问津处
热浪中蛰伏
不借春风不争雨露不羡慕
听鹿角脱落像在说万物有时序
一枯一荣自有眷顾
远山声声叹
春风已不再
你轻声说花开不嫌晚
穿过那仲夏光阴之荏苒
日复一日中可有答案
喧嚣的孤独
蝉鸣最清楚
曲曲折折坎坎坷坷来时路
流光半夏一步一煦经过了迷途
生长出倔强的纹路
远山声声叹
春风已不再
你轻声说花开不嫌晚
穿过那仲夏光阴之荏苒
日复一日中可有答案
人间多变幻
万物常流转
我用一生浇灌
穿幽微(不为谁)
驯暗夜(不流泪)
不去追随他们说的美
纷繁中找一方明媚
远山声声叹
春风已不再
你轻声说 花开不嫌晚
穿过那仲夏光阴之荏苒
日复一日中 可有答案
流云回头看
昼长夜渐短
赶路的人有朝霞作伴
世间的跋涉要转多少弯
云开月明时懂得绚烂
出品 : 共青团中央宣传部 X 网易云音乐`;
function initCustomLrc(lrcText) {
const container = document.getElementById('custom-lrc-container');
if (!container) return;
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().replace(/&#\d+;/g, '');
if (content) {
const div = document.createElement('div');
div.className = 'lrc-line';
div.textContent = content;
container.appendChild(div);
lines.push({ time, element: div });
}
}
});
// 【强兼容】监听音频,防止论坛屏蔽导致报错
function watchAudio() {
const audio = document.querySelector('.pa audio');
if (!audio) return false;
let lastActive = -1;
audio.addEventListener('timeupdate', () => {
const now = audio.currentTime;
let active = -1;
for (let i = 0; i < lines.length; i++) {
if (now >= lines.time) active = i;
else break;
}
if (active !== lastActive) {
lines.forEach((l, i) => l.element.classList.toggle('active', i === active));
lastActive = active;
}
});
audio.addEventListener('ended', () => {
lines.forEach(l => l.element.classList.remove('active'));
});
return true;
}
if (watchAudio()) return;
const ob = new MutationObserver(() => {
if (watchAudio()) ob.disconnect();
});
ob.observe(document.querySelector('.pa'), { childList: true, subtree: true });
}
// 【修复】延长等待时间,适配慢加载论坛
setTimeout(initCustomLrc, 1200, lrcString);
</script> 本帖最后由 霜染枫丹 于 2026-5-5 22:43 编辑
今日夏至,万物生长自有其序,云开月明时,自会懂得绚烂。这首《半夏生》献给每一个在盛夏光年,默默积蓄能量、等待破土而生的你。
盛夏炽烈,万物焦灼」有人将酷暑视为绝境,而有人,却在最滚烫的土壤里,听见自己破土的声音。在二十四节气中的夏至,“半夏”这一药用植物在酷暑中悄然孕育着药性,《半夏生》以此为题,讲述那些被烈日灼烧却依然向上伸展的故事,歌颂所有在逆境中野蛮生长的灵魂。主歌以极具画面感的笔触,勾勒出酷暑中的挣扎与蛰伏;副歌则如盛夏惊雷,用充满宿命感的旋律,炸裂出生命最炽烈的宣言。
「阳至极处,光始低语」最炽烈的光,才能照见最坚韧的生长,穿过那仲夏光阴之荏苒,日复一日中,终有答案。
[ 本帖最后由 霜染枫丹 于 2026-5-5 22:23 编辑 ]\n\n[
看枫丹介绍,这首歌曲很好,但我这里好像听不到呢。{:5_102:}
可能我的网不好,等一会再来。 红影 发表于 2026-5-5 22:20
看枫丹介绍,这首歌曲很好,但我这里好像听不到呢。
可能我的网不好,等一会再来。
在这里我也听不见,你听这个试试能否听见
https://www.yueyijyw.com/forum.php?mod=viewthread&tid=1536 红影 发表于 2026-5-5 22:20
看枫丹介绍,这首歌曲很好,但我这里好像听不到呢。
可能我的网不好,等一会再来。
我把音乐改成了mp3在播放器代码中还是没声音。用隐藏纯音乐播放添加进去歌曲能播放了,帖子就成了大图音画,那也比没声音好一点。我也不确定是因为添加进去了隐藏形式的歌曲播放导致不显示歌词还是编辑的问题。总之学艺不精,继续努力{:4_173:}{:4_190:}{:4_204:}
我刚制作的时候,还不许使用,我就把“半生夏”改成了“夏半生”,歌词是我自己提取的。等制作好了在一看,已经传开了,我的gif图片做好了,也就没改,一会儿再改过来{:4_173:}{:4_190:}
https://www.yueyijyw.com/data/attachment/forum/202605/01/023253a4183pxjrm7zrnj3.jpg
https://www.yueyijyw.com/data/attachment/forum/202605/01/023254fc47d4x44zxl78am.jpg https://www.yueyijyw.com/data/attachment/forum/202605/01/023255ugkk55bkyjgjizsb.jpg
本帖最后由 霜染枫丹 于 2026-5-6 00:23 编辑 <br /><br />https://www.yueyijyw.com/data/attachment/forum/202605/01/023529t0n2sl7607zlu77i.jpg 本帖最后由 霜染枫丹 于 2026-5-6 08:16 编辑 <br /><br /><style>
@import url('https://638183.freep.cn/638183/web/tz/tz.v4.css');
.pa {
--offsetX: 80px;
--bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/05/06/69fa870027d92.gif') no-repeat center/cover;
--ma-size: 8%;
width: 1400px;
height: 788px;
position: relative;
overflow: hidden;
}
.pa *, .pa *::before, .pa *::after {
content: none !important;
}
/* 【修复全屏问题】改用 bottom 定位,永远贴在底部 */
#custom-lrc-container {
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
text-align: center;
z-index: 9999;
pointer-events: none;
height: 50px;
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');
// ==============================================
// 【核心修复】音频必须加 muted 兼容论坛自动播放策略
// ==============================================
tz.add('audio', '', '', {
src: 'https://cccimg.com/view.php/b4a455d1fc09f2acdd605933402172e4.m4a',
muted: 'muted',
preload: 'auto'
});
tz.add('video', '', 'pd-vid', {
src: 'https://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69ba.mp4',
muted: 'muted',
preload: 'auto'
}).style('opacity: 0.2;');
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: 240px;');
tz.fs().style('left: 20px; top: 20px;');
const lrcString = `
半夏生
网易云音乐 x
共青团中央宣传部 二十四节气
「夏至」特别企划
歌手:银临
作词 : 邹念慈/申名利
作曲 : 邹念慈
无人问津处
热浪中蛰伏
不借春风不争雨露不羡慕
听鹿角脱落像在说万物有时序
一枯一荣自有眷顾
远山声声叹
春风已不再
你轻声说花开不嫌晚
穿过那仲夏光阴之荏苒
日复一日中可有答案
喧嚣的孤独
蝉鸣最清楚
曲曲折折坎坎坷坷来时路
流光半夏一步一煦经过了迷途
生长出倔强的纹路
远山声声叹
春风已不再
你轻声说花开不嫌晚
穿过那仲夏光阴之荏苒
日复一日中可有答案
人间多变幻
万物常流转
我用一生浇灌
穿幽微(不为谁)
驯暗夜(不流泪)
不去追随他们说的美
纷繁中找一方明媚
远山声声叹
春风已不再
你轻声说 花开不嫌晚
穿过那仲夏光阴之荏苒
日复一日中 可有答案
流云回头看
昼长夜渐短
赶路的人有朝霞作伴
世间的跋涉要转多少弯
云开月明时懂得绚烂
出品 : 共青团中央宣传部 X 网易云音乐`;
function initCustomLrc(lrcText) {
const container = document.getElementById('custom-lrc-container');
if (!container) return;
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().replace(/&#\d+;/g, '');
if (content) {
const div = document.createElement('div');
div.className = 'lrc-line';
div.textContent = content;
container.appendChild(div);
lines.push({ time, element: div });
}
}
});
// 【强兼容】监听音频,防止论坛屏蔽导致报错
function watchAudio() {
const audio = document.querySelector('.pa audio');
if (!audio) return false;
let lastActive = -1;
audio.addEventListener('timeupdate', () => {
const now = audio.currentTime;
let active = -1;
for (let i = 0; i < lines.length; i++) {
if (now >= lines.time) active = i;
else break;
}
if (active !== lastActive) {
lines.forEach((l, i) => l.element.classList.toggle('active', i === active));
lastActive = active;
}
});
audio.addEventListener('ended', () => {
lines.forEach(l => l.element.classList.remove('active'));
});
return true;
}
if (watchAudio()) return;
const ob = new MutationObserver(() => {
if (watchAudio()) ob.disconnect();
});
ob.observe(document.querySelector('.pa'), { childList: true, subtree: true });
}
// 【修复】延长等待时间,适配慢加载论坛
setTimeout(initCustomLrc, 1200, lrcString);
</script> https://pic.rmb.bdstatic.com/bjh/cms/250825/f054f44d379ddb4976d268822de2d48c_1756102424.4613_592.gif 霜染枫丹 发表于 2026-5-6 00:26
本帖最后由 霜染枫丹 于 2026-5-6 08:16 编辑
@import url('https://638183.freep.cn/638183/web/tz ...
问题出在用 i 做循环变量
for (let i = 0; i < lines.length; i++) {
if (now >= lines<i>.time) active = i;
else break;
}
用其他字符做循环变量 或 勾选禁用编辑器代码
页:
[1]