霜染枫丹 发表于 2026-6-22 19:16

曾醉


<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';

    .pa {
      --offsetX: 80px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/22/6a39180a3a2a7.gif') no-repeat center/cover;
      --ma-size: 4%;
      width: 1300px;
      height: 731px;
      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: 'https://imgimg.qqdsw8.cn/view.php/915c88832e0049c6bd78acf0744ba633.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/05/01/69f4a3f82e1c7.png'
})
.style('right: 400px; bottom:20px;') // 【关键】合并写在这里
.playmp3();

    tz.bgprog().style('bottom: 8px; color: #fefefe; width: 400px;');
    tz.fs().style('left: 20px; top: 20px;');

    const lrcString = `
曾醉
作词：五子
作曲：Winky诗
演唱：HITA
山深问桃花染过几度春
哪一枝勾住过客衣上风尘
有倦意三分
要行路千程
怎记这山水静默待离人
轻舟邀斜月听岸上孤筝
回旋处恰趁醉踏青石前门
有余音两声
共与你微醺
融入这一夜长灯落满身
曾画下山间桃花流水逐云
跌破了一晌贪梦了无痕
倚泉浣笔重逢或偶遇洗不净
点墨片心留在归梦时分
斟满浮生在酒中浮与沉
哪一口填满岁月旧日余温
有醉意三分
都酿做前尘
梦醒后又在何处扮离人
红梅邀斜月听墙里孤筝
回旋处不是你惯唱的游吟
似乡音两声
唱今雪纷纷
错看成那年桃花落满身
曾见你山间走马落日长云
踏破了一声珍重无处闻
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平
用醉眼看不清擦肩人
酒醒后分不清假与真
行遍天涯旧约难记存
分岔太多归路不可寻
曾画下山间桃花流水逐云
跌破了一晌贪梦何处寻
倚泉浣笔
重逢或偶遇洗不净
点墨片心留在归梦时分
曾见你山间走马落日长云
踏破了一声珍重了无痕
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平`;

    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-6-22 19:35

用心之作，赞

杨帆 发表于 2026-6-22 19:36

制作精美，好听好看，效果惊艳，谢谢枫丹老师精彩分享{:4_204:}

霜染枫丹 发表于 2026-6-22 19:54

马黑黑 发表于 2026-6-22 19:35
用心之作，赞

马老师晚上好~~

感谢您的鼓励，在这里有您的代码我能够制作简单的播放器，很感谢您的无私分享！祝您吉祥快乐~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-6-22 19:56

杨帆 发表于 2026-6-22 19:36
制作精美，好听好看，效果惊艳，谢谢枫丹老师精彩分享

扬帆晚上好~~我不喜欢看手机，还是喜欢横版计算机上看，就有制作了一个横版的。感谢您的鼓励，祝您夏安~~{:4_204:}{:4_190:}

杨帆 发表于 2026-6-22 19:59

霜染枫丹 发表于 2026-6-22 19:56
扬帆晚上好~~我不喜欢看手机，还是喜欢横版计算机上看，就有制作了一个横版的。感谢您的鼓励，祝您夏安~~ ...

是，我也不太喜欢在手机上看帖子{:4_173:}

梦油 发表于 2026-6-22 20:06

图美曲好，制作上乘。赞！

霜染枫丹 发表于 2026-6-22 20:23

梦油 发表于 2026-6-22 20:06
图美曲好，制作上乘。赞！

感谢梦老支持，晚上好！{:4_204:}{:4_190:}

红影 发表于 2026-6-22 21:05

这样的场景真美，也突出了歌词的美。
欣赏枫丹好帖{:4_187:}

霜染枫丹 发表于 2026-6-22 21:09

红影 发表于 2026-6-22 21:05
这样的场景真美，也突出了歌词的美。
欣赏枫丹好帖

场景多了文件太大，没敢加进去夜晚灯下。AI真是为制作助力，{:4_190:}

马黑黑 发表于 2026-6-23 13:19

霜染枫丹 发表于 2026-6-22 19:54
马老师晚上好~~

感谢您的鼓励，在这里有您的代码我能够制作简单的播放器，很感谢您的无私分享！祝您吉 ...

下午好

梦油 发表于 2026-6-23 13:57

霜染枫丹 发表于 2026-6-22 20:23
感谢梦老支持，晚上好！

枫丹朋友别客气。

霜染枫丹 发表于 2026-6-23 18:56

马黑黑 发表于 2026-6-23 13:19
下午好

马老师下午好，欢迎您！我把您的那些几何形状集中到一个播放器里面，觉得这些几何形状作为素材很新颖，我在其他地方还没看到。特别之处在于能演绎一种科技感的同时能有更多层面的承载能力。还没做完，今晚能发上来{:4_190:}{:4_199:}{:4_204:}

马黑黑 发表于 2026-6-23 20:27

霜染枫丹 发表于 2026-6-23 18:56
马老师下午好，欢迎您！我把您的那些几何形状集中到一个播放器里面，觉得这些几何形状作为素材很新颖，我 ...

{:4_190:}

红影 发表于 2026-6-24 16:27

霜染枫丹 发表于 2026-6-22 21:09
场景多了文件太大，没敢加进去夜晚灯下。AI真是为制作助力，

是啊，有AI让制作方便多了呢。
页: [1]
查看完整版本: 曾醉