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

你是我心中的茉莉花——齐旦布

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

    .pa {
      --offsetX: 70px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/05/16/6a082a4ad8cd8.gif') no-repeat center/cover;
      --ma-size: 6%;
      width: 1115px;
      height: 627px;
      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/a09697c6d0540244662fc6b9039db2eb.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/16/6a08360e4889f.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 = `
你是我心中的茉莉花
彭韵豪作词
夏富东作曲
齐旦布演唱
烟花三月的江南雨
淋湿了我的思绪
我沿着往日的足迹
寻找你的点点滴滴
青石巷口的清风里飘荡着你的香味
我在悠悠的乌篷船上摇着太多的回忆
你是我心中的茉莉花
美丽的茉莉花
流水它带走了岁月
却带不走我对你的牵挂
你是我心中的茉莉花
纯洁的茉莉花
在梦里芬芳
思念里发芽
你是最美的花
烟花三月的江南雨
淋湿了我的思绪
我沿着往日的足迹
寻找你的点点滴滴
青石巷口的清风飘荡着你的香味
我在悠悠的乌篷船上摇着太多的回忆
你是我心中的茉莉花
美丽的茉莉花
流水它带走了岁月
却带不走我对你的牵挂
你是我心中的茉莉花
纯洁的茉莉花
在梦里芬芳
思念里发芽
你是我心中的茉莉花
美丽的茉莉花
流水它带走了岁月
却带不走我对你的牵挂
你是我心中的茉莉花
纯洁的茉莉花
在梦里芬芳
思念里发芽
你是最美的花
在梦里芬芳
思念里发芽
你是最美的花
`;

    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-16 19:59

https://5b0988e595225.cdn.sohucs.com/images/20180228/adaf3fc741ce4be48180778330961114.gif

梦油 发表于 2026-5-16 20:10

欣赏枫丹精美制作，祝福枫丹幸福快乐！

霜染枫丹 发表于 2026-5-16 20:54

也曾年轻 发表于 2026-5-16 19:59


感谢也曾年轻的支持，晚上好！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-16 20:56

梦油 发表于 2026-5-16 20:10
欣赏枫丹精美制作，祝福枫丹幸福快乐！

梦老晚上好~~

这种写实表述做起来简单，整理文件夹发现我还下载有这首歌，就制作了这个播放器。感谢梦老的支持，晚安~~{:4_204:}{:4_190:}

红影 发表于 2026-5-16 21:37

这制作真美，和歌曲意境十分相符。
欣赏枫丹好帖，点赞{:4_187:}

梦油 发表于 2026-5-17 10:02

霜染枫丹 发表于 2026-5-16 20:56
梦老晚上好~~

这种写实表述做起来简单，整理文件夹发现我还下载有这首歌，就制作了这个播放器。感谢梦 ...

枫丹朋友别客气，你对俺的支持更多，更宝贵。

雨季工作室 发表于 2026-5-19 09:07

欣赏了，问好枫丹老师！

霜染枫丹 发表于 2026-5-19 19:14

红影 发表于 2026-5-16 21:37
这制作真美，和歌曲意境十分相符。
欣赏枫丹好帖，点赞

感谢红影的支持！我在油田的这台计算机是2014年的，软件都不能安装现在的，做不了太复杂的帖子。很高兴有您鼓励，夏安！{:4_204:}{:4_190:}

红影 发表于 2026-5-19 23:45

霜染枫丹 发表于 2026-5-19 19:14
感谢红影的支持！我在油田的这台计算机是2014年的，软件都不能安装现在的，做不了太复杂的帖子。很高兴有 ...

那么早的帖子能做这么漂亮，太不容易了{:4_187:}
页: [1]
查看完整版本: 你是我心中的茉莉花——齐旦布