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

又见炊烟


<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   
    .pa {
      --offsetX: 20px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/04/04/69d123bdac034.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/7a6106d7ef0d31a777e10a05d45d309e.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/03/30/69ca96dae054f.png' }).style('bottom: 60px;').playmp3();
   
    tz.bgprog().style('bottom: 20px; color: #fefefe; width: 240px;');
    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-4 23:12

4月2日，勐巴娜西乐团对歌曲进行了改编，感觉低音更突出了。个别文字也进行了改动。

也曾年轻 发表于 2026-4-5 07:35

https://pic.rmb.bdstatic.com/bjh/news/5cf26418429130262e0e39e315e9d8f3.gif

梦江南 发表于 2026-4-5 08:27

好听，好看，谢谢版主精彩制作！{:4_187:}

红影 发表于 2026-4-5 12:44

这合唱真好听，低音和高音都好听。
欣赏枫丹好帖{:4_199:}

魏淑芬 发表于 2026-4-5 13:45

特别爱听男声重唱，我感觉唱得好的，有一种金属的光泽感，我自创的形容词，哈哈。
奇怪，我怎么看不到图像呢？

魏淑芬 发表于 2026-4-5 13:46

哦噢，刷新一下图像出来了。

霜染枫丹 发表于 2026-4-5 22:26

也曾年轻 发表于 2026-4-5 07:35


感谢也曾年轻的支持！晚上好！！这五兄弟最近改编了好几首以前唱过的的歌曲，挺好听的。{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-4-5 22:28

红影 发表于 2026-4-5 12:44
这合唱真好听，低音和高音都好听。
欣赏枫丹好帖

我就感觉他们唱的听着特别舒畅。

谢谢红影的支持，晚上好！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-4-5 22:29

魏淑芬 发表于 2026-4-5 13:46
哦噢，刷新一下图像出来了。

魏淑芬晚上好~~

感谢您的支持！我也是很喜欢听这五兄弟的歌。{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-4-5 22:30

魏淑芬 发表于 2026-4-5 13:46
哦噢，刷新一下图像出来了。

我也不懂是为什么，就是需要刷新。现在知道了就是不出来就在来一次{:4_204:}{:4_190:}

红影 发表于 2026-4-6 19:31

霜染枫丹 发表于 2026-4-5 22:28
我就感觉他们唱的听着特别舒畅。

谢谢红影的支持，晚上好！

能得到你这样的知音，唱的人也欢喜{:4_187:}
页: [1]
查看完整版本: 又见炊烟