霜染枫丹 发表于 2026-5-29 08:20

竹楼听雨 对唱


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

    .pa {
      --offsetX: 80px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/05/28/6a184078cc80a.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: 'http://cccimg.com/view.php/8e9e8c01c3f4473faf3a729078afdbcd.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: 40px; bottom: 20px;') // 【关键】合并写在这里
.playmp3();

    tz.bgprog().style('bottom: 8px; 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-5-29 08:29

https://dingyue.nosdn.127.net/1JDzYGxeMA12Mu29xkLqfSyuxdHkQiacHRQIUicAgLX=O1541554390858.gif

霜染枫丹 发表于 2026-5-29 08:35

也曾年轻 发表于 2026-5-29 08:29

也曾年轻上午好~~这首歌昨天我一听到就很喜欢。感谢您的支持。夏安！！

https://s3.bmp.ovh/2026/05/29/2xNd9viy.gif

梦江南 发表于 2026-5-29 09:02

不知道这几天怎么啦，一些歌词都 听不到。{:4_201:}

霜染枫丹 发表于 2026-5-29 10:12

梦江南 发表于 2026-5-29 09:02
不知道这几天怎么啦，一些歌词都 听不到。

梦江南上午好~如果您能听到本地的播放，就看看是否是浏览器的问题，如果本地他听不到没拿就看看计算机的设置，我这里播放很正常。

感谢您的支持，夏安~~{:4_204:}{:4_190:}

梦油 发表于 2026-5-29 10:46

欣赏精美制作，问好霜染枫丹。

杨帆 发表于 2026-5-29 11:44

很漂亮~好听好看，谢谢枫丹老师精彩分享{:4_204:}

红影 发表于 2026-5-29 19:48

这歌词很好，很偶人生哲理。
欣赏枫丹带来的好歌，制作漂亮，这小播也很漂亮{:4_187:}

霜染枫丹 发表于 2026-5-30 16:13

梦油 发表于 2026-5-29 10:46
欣赏精美制作，问好霜染枫丹。


梦老下午好~~

感谢您的支持鼓励，祝您夏安~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-30 16:15

杨帆 发表于 2026-5-29 11:44
很漂亮~好听好看，谢谢枫丹老师精彩分享





感谢扬帆的支持，现在新歌多，只作就简单了很多，祝您制作愉快~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-30 16:17

红影 发表于 2026-5-29 19:48
这歌词很好，很偶人生哲理。
欣赏枫丹带来的好歌，制作漂亮，这小播也很漂亮





红影下午好~~我这就是年龄大了，喜欢这种风格的歌曲。干谢您的支持。祝您夏安！！{:4_204:}{:4_190:}

梦油 发表于 2026-5-30 16:28

霜染枫丹 发表于 2026-5-30 16:13
梦老下午好~~

感谢您的支持鼓励，祝您夏安~~

谢谢枫丹朋友的美好祝福。{:5_108:}

红影 发表于 2026-5-30 21:26

霜染枫丹 发表于 2026-5-30 16:17
红影下午好~~我这就是年龄大了，喜欢这种风格的歌曲。干谢您的支持。祝您夏安！！{:4_1 ...

这样的歌曲很好啊，还是很有内容的{:4_204:}
页: [1]
查看完整版本: 竹楼听雨 对唱