论坛 › AI创作交流 › 岁月悠悠走过春秋冬夏

霜染枫丹 发表于 2026-5-7 18:52

岁月悠悠走过春秋冬夏

<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/07/69fc5d8fbdc8f.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/381c81d60d045a3992493e4028ee44a5.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/2025/12/12/693bfcfa75010.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-17
岁月悠悠 走过春秋冬夏
看淡世事 心中无牵无挂
风也潇洒 云也潇洒
平安健康 就是最美的花
得失成败 不必苦苦挣扎
放下烦恼 心宽天地大
一路欢歌 一路步伐
夕阳映红 天边满天彩霞
想得开 看得透 晚年幸福又长寿
拿得起 放得下 夕阳也是一幅画
为健康 加加油 为生命 喝喝彩
心若向阳 花常开 人生越活越精彩
岁月悠悠 走过春秋冬夏
看淡世事 心中无牵无挂
风也潇洒 云也潇洒
平安健康 就是最美的花
得失成败 不必苦苦挣扎
放下烦恼 心宽天地大
一路欢歌 一路步伐
夕阳映红 天边满天彩霞
想得开 看得透 晚年幸福又长寿
拿得起 放得下 夕阳也是一幅画
为健康 加加油 为生命 喝喝彩
心若向阳 花常开 人生越活越精彩
想得开 看得透 晚年幸福又长寿
拿得起 放得下 夕阳也是一幅画
为健康 加加油 为生命 喝喝彩
心若向阳 花常开 人生越活越精彩
`;

    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-7 18:53

岁月悠悠走过春秋冬夏


歌手:
包幸福/超哥
发行日期:2026-04-17
岁月悠悠 走过春秋冬夏
看淡世事 心中无牵无挂
风也潇洒 云也潇洒
平安健康 就是最美的花
得失成败 不必苦苦挣扎
放下烦恼 心宽天地大
一路欢歌 一路步伐
夕阳映红 天边满天彩霞
想得开 看得透 晚年幸福又长寿
拿得起 放得下 夕阳也是一幅画
为健康 加加油 为生命 喝喝彩
心若向阳 花常开 人生越活越精彩
岁月悠悠 走过春秋冬夏
看淡世事 心中无牵无挂
风也潇洒 云也潇洒
平安健康 就是最美的花
得失成败 不必苦苦挣扎
放下烦恼 心宽天地大
一路欢歌 一路步伐
夕阳映红 天边满天彩霞
想得开 看得透 晚年幸福又长寿
拿得起 放得下 夕阳也是一幅画
为健康 加加油 为生命 喝喝彩
心若向阳 花常开 人生越活越精彩
想得开 看得透 晚年幸福又长寿
拿得起 放得下 夕阳也是一幅画
为健康 加加油 为生命 喝喝彩
心若向阳 花常开 人生越活越精彩

梦江南 发表于 2026-5-7 19:06

欣赏版主的精彩视频，好看好听。晚上好！{:4_199:}

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

梦江南 发表于 2026-5-7 19:06
欣赏版主的精彩视频，好看好听。晚上好！

梦江南下午好，欢迎您~~
也是听到了这首歌挺喜欢的，就做了一个播放器。哈哈~~现在就是瞎玩了，很感谢您的支持，祝您夏安~~{:4_204:}{:4_190:}

也曾年轻 发表于 2026-5-7 19:25

https://img1.oldkids.cn/upload/2021/12/01/blog_260844733_20211201053404192.gif

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

也曾年轻 发表于 2026-5-7 19:25


欢迎也曾年轻，晚上好~~很感谢有您的一贯支持，非常荣幸，恭祝夏安！！{:4_204:}{:4_190:}

梦油 发表于 2026-5-7 20:02

看得出霜染枫丹朋友是一位很有品味的人。

杨帆 发表于 2026-5-7 22:18

岁月悠悠走过春秋冬夏，挺新挺美挺有味的一首歌，谢谢枫丹老师精彩分享{:4_204:}

红影 发表于 2026-5-7 22:27

很新的歌呢，歌词很洒脱透彻，也很好听。
欣赏枫丹好帖，很赞{:4_187:}

霜染枫丹 发表于 2026-5-7 22:56

梦油 发表于 2026-5-7 20:02
看得出霜染枫丹朋友是一位很有品味的人。

梦老晚上好~~您老哥谬赞了，我就是很贪玩，看到好玩的形式就感兴趣。咱们上网就是图个让大脑活动一下。谢梦老鼓励，晚安~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-7 22:59

杨帆 发表于 2026-5-7 22:18
岁月悠悠走过春秋冬夏，挺新挺美挺有味的一首歌，谢谢枫丹老师精彩分享

我现在走到了桑榆之途，就很喜欢听这些对心思的歌曲，有些励志，有些劝慰，听着舒心。谢扬帆的支持，晚安~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-7 23:01

红影 发表于 2026-5-7 22:27
很新的歌呢，歌词很洒脱透彻，也很好听。
欣赏枫丹好帖，很赞

红影晚上好~~我是前几天听到的，今天闲了就做了这个帖子，挺喜欢听这首歌，豁达大气。感谢您的鼓励，晚安~~{:4_204:}{:4_190:}

梦油 发表于 2026-5-8 14:16

霜染枫丹 发表于 2026-5-7 22:56
梦老晚上好~~您老哥谬赞了，我就是很贪玩，看到好玩的形式就感兴趣。咱们上网就是图个让大脑活动一下。谢 ...

每次看到你的优秀作品时，我都在想，我认识你这样的朋友，真是幸运。像你这样的人，不是到处都有的。

霜染枫丹 发表于 2026-5-9 00:03

梦油 发表于 2026-5-8 14:16
每次看到你的优秀作品时，我都在想，我认识你这样的朋友，真是幸运。像你这样的人，不是到处都有的。

梦老晚上好！我们是同龄人，有着相同的想法，就很容易共情。谢谢梦老非鼓励支持，能在一个平台说说话，特别高兴！祝您夏安~~{:4_204:}{:4_190:}

梦油 发表于 2026-5-9 10:23

霜染枫丹 发表于 2026-5-9 00:03
梦老晚上好！我们是同龄人，有着相同的想法，就很容易共情。谢谢梦老非鼓励支持，能在一个平台说说话，特 ...

我们虽然都是上了年纪的人，但我很佩服你的才华和敏捷的思维。{:5_116:}

查看完整版本: 岁月悠悠走过春秋冬夏