敬山海敬自由
本帖最后由 霜染枫丹 于 2026-4-2 16:30 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {
--offsetX: 0px;
--bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/04/02/69ce20c23d57a.gif') no-repeat center/cover;
--ma-size: 10%;
width: 1400px;
height: 788px;
position: relative;
overflow: hidden;
}
.pa *, .pa *::before, .pa *::after {
content: none !important;
}
/* --- 歌词容器：单句模式 --- */
#custom-lrc-container {
position: absolute;
top: 30px;
left: -110px;
/* 布局：Flex 居中，确保单句歌词在容器内完美居中 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
/* 尺寸：不需要很宽，因为只有一句 */
width: 400px;
height: 400px;
z-index: 9999;
pointer-events: none;
/* 不需要 overflow hidden 了，因为只有一句，但保留以防万一 */
overflow: visible;
}
/* 歌词行样式 */
.lrc-line {
writing-mode: vertical-rl; /* 竖排 */
text-orientation: upright; /* 文字正立 */
white-space: pre;
color: #fefefe;
font-size: 32px; /* 单句显示可以稍微大一点 */
font-weight: bold;
text-shadow: 0 0 15px rgba(0,0,0,0.9);
/* 初始状态：透明且稍微缩小，用于动画 */
opacity: 0;
transform: scale(0.9) translateY(20px);
/* 动画定义 */
animation: lrcFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
position: relative;
flex-shrink: 0;
}
/* 定义入场动画：淡入 + 上浮 + 放大 */
@keyframes lrcFadeIn {
to {
opacity: 1;
transform: scale(1) translateY(0);
text-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 10px rgba(255, 255, 255, 0.4);
color: #fffacd; /* 最终变为金色 */
}
}
/* 如果需要旧歌词淡出效果，可以加一个 class，但直接替换 DOM 更简单干脆 */
</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/d590d52071f9ee58dacb35351b0aebef.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/04/02/69ce16e493ac6.png' }).style('bottom: 60px;').playmp3();
tz.bgprog().style('bottom: 40px; color: #fefefe; width: 24=280px;');
tz.fs().style('left: 20px; top: 20px;');
const lrcString = `
敬山海敬自由
填词：未子夫
作曲：五条悟
演唱：六小乐
天地好大 世界好宽
我想去走走
一个人静静 听风的温柔
清晨有粥 黄昏有酒
天黑有星斗
人间来一趟 美景不胜收
我爱大风 也爱烈酒
爱山川锦绣
越过这片海 去下座山丘
学会洒脱 学会放手
学会不回头
留不住的人不必再挽留
大河向东流我要向前走
所有烦恼哀愁 抛在身后
往事化成风故事酿成酒
一杯敬山海一杯敬自由
我爱大风 也爱烈酒
爱山川锦绣
越过这片海 去下座山丘
学会洒脱 学会放手
学会不回头
留不住的人不必再挽留
大河向东流我要向前走
所有烦恼哀愁 抛在身后
往事化成风故事酿成酒
一杯敬山海一杯敬自由
大河向东流我要向前走
所有烦恼哀愁 抛在身后
往事化成风故事酿成酒
一杯敬山海一杯敬自由
大河向东流我要向前走
所有烦恼哀愁 抛在身后
往事化成风故事酿成酒
一杯敬山海一杯敬自由
`;
let lines = [];
let currentActiveIndex = -1; // 记录当前显示的索引，避免重复渲染
function initCustomLrc(lrcText) {
const container = document.getElementById('custom-lrc-container');
container.innerHTML = '';
lines = [];
currentActiveIndex = -1;
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 });
}
});
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;
}
// 【关键逻辑】只有当歌词索引发生变化时，才更新 DOM
if (activeIndex !== -1 && activeIndex !== currentActiveIndex) {
currentActiveIndex = activeIndex;
renderSingleLine(container, lines.content);
}
});
audio.addEventListener('ended', () => {
container.innerHTML = '';
currentActiveIndex = -1;
});
// 拖动进度条处理
audio.addEventListener('seeked', () => {
const currentTime = audio.currentTime;
let activeIndex = -1;
for (let i = 0; i < lines.length; i++) {
if (currentTime >= lines.time) activeIndex = i;
else break;
}
if (activeIndex !== -1 && activeIndex !== currentActiveIndex) {
currentActiveIndex = activeIndex;
renderSingleLine(container, lines.content);
}
});
}
}
// 渲染单句歌词函数
function renderSingleLine(container, text) {
// 1. 清空容器
container.innerHTML = '';
// 2. 创建新元素
const div = document.createElement('div');
div.className = 'lrc-line';
div.textContent = text;
// 3. 放入容器 (CSS 动画会自动播放)
container.appendChild(div);
}
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>
https://ff.xiaoqiaodali.top:5401/i/2026/04/02/69ce16e493ac6.png
http://cccimg.com/view.php/55b9e2475d8b803304c1f0378f741d10.png
https://wx1.sinaimg.cn/mw690/0089cIy8gy1i39wojsrkzg306o06oq4q.gif 也曾年轻 发表于 2026-4-2 16:21
也曾年轻下午好！！
感谢您的支持鼓励，刚才试了一下，点击编辑歌词如之前一样不显示了，勾选了那几个禁用选项，就恢复了正常！太高兴了，衷心感谢！！{:4_204:}{:4_190:}{:4_172:}
漂亮的制作，尤其小播的制作，还特地带着相机呢，把山河都摄到镜头里，这寓意真好。
欣赏枫丹好帖{:4_199:} 好听的歌曲，漂亮的制作，谢谢枫丹老师精彩分享{:4_204:} 红影 发表于 2026-4-2 17:31
漂亮的制作，尤其小播的制作，还特地带着相机呢，把山河都摄到镜头里，这寓意真好。
欣赏枫丹好帖{:4_199: ...
红影晚上好~~
刚上来。这首歌听着洒脱，AI素材提供了方便。谢您的支持，春祺~~{:4_204:}{:4_190:}
杨帆 发表于 2026-4-2 20:12
好听的歌曲，漂亮的制作，谢谢枫丹老师精彩分享
欢迎扬帆，晚上好~~感谢您的支持鼓励，遥祝春褀！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-4-3 19:42
红影晚上好~~
刚上来。这首歌听着洒脱，AI素材提供了方便。谢您的支持，春祺~~
是的，这歌特别洒脱，很好听呢{:4_187:}
页:
[1]