花妖徐子尧演唱（播放器） - AI创作交流 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › AI创作交流 › 花妖徐子尧演唱（播放器）

霜染枫丹 发表于 2026-4-9 23:51

花妖徐子尧演唱（播放器）

<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/09/69d7aaff687b6.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/cfd9b774c93b025dc9b5e660d2b59ff6.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/04/09/69d7b0d5a5ce2.png' }).style('bottom: 60px;').playmp3();

tz.bgprog().style('bottom: 20px; color: #fefefe; width: 400px;');
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-4-10 08:28

https://t7.baidu.com/it/u=1274332686,935252790&fm=193

红影发表于 2026-4-10 20:41

这个版本的花妖也好听呢，枫丹的制作好美啊。
欣赏枫丹好帖{:4_199:}

霜染枫丹 发表于 2026-4-12 23:56

本帖最后由霜染枫丹于 2026-4-13 00:00 编辑

也曾年轻发表于 2026-4-10 08:28

也曾年轻晚上好！突然来了点急事忙了2天，儿子在跑一个自己写的什么程序，让我配合按照他的要求操作，弄的我这天特紧张跟着忙活没能上来。没上来。感谢您的支持，祝您春祺！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-4-13 00:00

红影发表于 2026-4-10 20:41
这个版本的花妖也好听呢，枫丹的制作好美啊。
欣赏枫丹好帖

红影晚上好~~儿子在跑一个自己写的什么程序，让我配合按照他的要求操作，弄的我这天特紧张跟着忙活没能上来。感谢你的支持，祝安好！{:4_204:}{:4_190:}

红影发表于 2026-4-14 22:59

霜染枫丹发表于 2026-4-13 00:00
红影晚上好~~儿子在跑一个自己写的什么程序，让我配合按照他的要求操作，弄的我这天特紧张跟着忙活没能上 ...

令公子是弄计算机的啊，厉害。
没事啊，论坛就是玩，有空了来就好啊{:4_204:}

霜染枫丹 发表于 2026-4-14 23:31

红影发表于 2026-4-14 22:59
令公子是弄计算机的啊，厉害。
没事啊，论坛就是玩，有空了来就好啊

红影晚上好！我儿子是学数学的，研究生是金融数学，一直做金融投资，编程就是辅助，在股票期货上有部分是自动交易，让程序自动执行。这部分的程序需要自己写，别人写是肯定不敢用的，能写的人不多。这样就需要随时变动。

红影发表于 2026-4-15 22:15

霜染枫丹发表于 2026-4-14 23:31
红影晚上好！我儿子是学数学的，研究生是金融数学，一直做金融投资，编程就是辅助，在股票期货上有部分是 ...

你儿子还挺厉害，也是单位里的中流砥柱吧{:4_204:}

霜染枫丹 发表于 2026-4-15 22:25

红影发表于 2026-4-15 22:15
你儿子还挺厉害，也是单位里的中流砥柱吧

儿子的信息网上有公示，不用我操心

https://www.zaih.com/falcon/mentors/2bq6emk3rco?from=tutor_like_tutor

红影发表于 2026-4-16 23:56

霜染枫丹发表于 2026-4-15 22:25
儿子的信息网上有公示，不用我操心

https://www.zaih.com/falcon/mentors/2bq6emk3rco?from=tutor_lik ...

太厉害了，清华的，成功人士啊{:4_199:}

页: [1]

查看完整版本: 花妖徐子尧演唱（播放器）