一念花开（播放器）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {
--offsetX: 80px;
--bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/04/18/69e3a8fb2f8aa.gif') no-repeat center/cover;
--ma-size: 6%;
width: 1400px;
height: 788px;
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: 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');
tz.add('audio', '', '', { src: 'http://cccimg.com/view.php/3c3b93a5a37aebad3d627d3ef26bda27.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/04/69a8082bb8885.png'
})
.style('right: 40px; bottom: 50px;') // 【关键】合并写在这里
.playmp3();
tz.bgprog().style('bottom: 10px; color: #fefefe; width: 400px;');
tz.fs().style('left: 20px; top: 20px;');
const lrcString = `
一念花开
发行日期:2026-04-04
歌手: 生命树下
初见那一天
微风正轻柔
人海茫茫之间
忽然停下脚步
多少个岁月
漂泊在旅途
原来那份温暖
一直为我守候
看过多少花
开落在人间
多少故事散去
只剩旧日云烟
若不是那束光
照进我心间
漫长的黑夜里
谁陪我走向明天
一寸光一寸年
一程山水一程缘
当繁花落满天
原来温柔从未走远
这一生相遇
像花开一瞬间
在人海深处
忽然看见你的脸
多少风雨多少时间
原来一直 都在我身边
走过多少路
问过多少年
当风吹散往事
才懂心的思念
原来在远方
有人未曾走远
等我回头那刻
灯火依然温暖
一寸土一寸天
一花一叶一眷恋
爱悄悄在人间
开在最深的心田
忘忧愁忘流年
忘记孤单和从前
若万物凋零
若四季改变
那份温柔依然停在心间
当繁花落尽
当故事走远
你给的光还在我眼前
这一生走过多少路途
回忆斑斑都写满你的温度
`;
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>
https://img1.oldkids.cn/upload/2021/12/01/blog_260844733_20211201053404192.gif 欣赏精彩制作，问好霜染枫丹。 别出心裁，效果惊艳，谢谢枫丹老师精彩分享{:4_204:} 这画面特别炫酷，赞！{:4_187:} 本帖最后由 霜染枫丹 于 2026-4-21 21:47 编辑
也曾年轻 发表于 2026-4-21 12:35
感谢也曾年轻的支持！晚上好~~{:4_204:}{:4_190:}
https://www.huachaowang.com/forum.php?mod=attachment&aid=NDkwMTR8ZjVjNWUzODd8MTc3Njc3ODk4Nnw3OTg1fDkyNDYz&noupdate=yes
本帖最后由 霜染枫丹 于 2026-4-21 21:47 编辑
梦油 发表于 2026-4-21 14:16
欣赏精彩制作，问好霜染枫丹。
谢梦老的鼓励！很荣幸~~晚上好！{:4_204:}{:4_190:}
https://www.huachaowang.com/forum.php?mod=attachment&aid=NDkwMTR8ZjVjNWUzODd8MTc3Njc3ODk4Nnw3OTg1fDkyNDYz&noupdate=yes
本帖最后由 霜染枫丹 于 2026-4-21 21:47 编辑
杨帆 发表于 2026-4-21 14:53
别出心裁，效果惊艳，谢谢枫丹老师精彩分享
欢迎扬帆，感谢您的支持鼓励，晚上好！{:4_204:}{:4_190:}
https://www.huachaowang.com/forum.php?mod=attachment&aid=NDkwMTR8ZjVjNWUzODd8MTc3Njc3ODk4Nnw3OTg1fDkyNDYz&noupdate=yes
本帖最后由 霜染枫丹 于 2026-4-21 21:46 编辑
梦江南 发表于 2026-4-21 15:05
这画面特别炫酷，赞！
欢迎梦江南，感谢你的支持。我也挺喜欢这幅图的，现在AI出图能力越来越强了。祝你吉祥！{:4_204:}{:4_190:}
https://www.huachaowang.com/forum.php?mod=attachment&aid=NDkwMTR8ZjVjNWUzODd8MTc3Njc3ODk4Nnw3OTg1fDkyNDYz&noupdate=yes
太惊艳！太震憾了，大姐是越做越高级了哈！{:4_178:} 这制作太美了，特别奇妙，特别精美。欣赏枫丹好帖{:4_199:} 樵歌 发表于 2026-4-21 20:44
太惊艳！太震憾了，大姐是越做越高级了哈！
小樵哥晚上好~~AI素材满足了想象，还是这里有相应的栏目，促动了思维，谢谢你！感谢您的鼓励，祝您吉祥！刚做了个图片，第一个送给你
https://s3.bmp.ovh/2026/04/22/KrJQeLKE.png 红影 发表于 2026-4-21 20:59
这制作太美了，特别奇妙，特别精美。欣赏枫丹好帖
AI的虚拟带来了将想法具象化的途径，挺好玩的。感谢您的支持，新作的祝福图片送给你，祝您吉祥！！、
https://www.huachaowang.com/forum.php?mod=attachment&aid=NDkwMTR8ZjVjNWUzODd8MTc3Njc3ODk4Nnw3OTg1fDkyNDYz&noupdate=yes
霜染枫丹 发表于 2026-4-21 21:46
AI的虚拟带来了将想法具象化的途径，挺好玩的。感谢您的支持，新作的祝福图片送给你，祝您吉祥！！、
...
这个帖子非常具有想象力，太赞了{:4_187:} 霜染枫丹 发表于 2026-4-21 20:42
欢迎梦江南，感谢你的支持。我也挺喜欢这幅图的，现在AI出图能力越来越强了。祝你吉祥！{:4_190 ...
问好版主，是的，AI的出图出视频功能越来越强大了。版主很会玩的。{:4_204:} 霜染枫丹 发表于 2026-4-21 21:43
小樵哥晚上好~~AI素材满足了想象，还是这里有相应的栏目，促动了思维，谢谢你！感谢您的鼓励，祝您吉祥！ ...
谢谢，太漂亮了！特别喜欢！{:4_204:}
页:
[1]