霜染枫丹 发表于 2026-4-8 19:51

三月里的小雨 男声五重唱

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

    .pa {
      --offsetX: 0px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/04/07/69d4cc27c0dc8.gif') no-repeat center/cover;
      --ma-size: 10%;
      width: 1400px;
      height: 788px;
      position: relative;
      overflow: hidden;
    }

    .pa *, .pa *::before, .pa *::after {
      content: none !important;
    }

    #custom-lrc-container {
      position: absolute;
      top: 30px;
      left: -110px;   
      display: flex;
      justify-content: center;
      align-items: center;   
      width: 400px;      
      height: 400px;      
      z-index: 9999;
      pointer-events: none;
      overflow: visible;
    }

    .lrc-line {
      writing-mode: vertical-rl;   
      text-orientation: upright;   
      white-space: pre;
      font-size: 34px;
      font-weight: bold;
      text-shadow: 0 0 15px rgba(0,0,0,0.9);
      opacity: 0;
      transform: scale(0.9) translateY(20px);
      animation: lrcFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      position: relative;
      flex-shrink: 0;
    }

    @keyframes lrcFadeIn {
      to {
            opacity: 1;
            transform: scale(1) translateY(0);
            text-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 10px rgba(255,255,255,0.3);
      }
    }

    .char-color {
      display: inline-block;
      animation: charGlow 0.8s forwards;
    }

    @keyframes charGlow {
      to {
            text-shadow: 0 0 10px currentColor;
      }
    }
</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/6e512b91be85435805ae341d8b434805.mp3' });
    tz.add('video', '', 'pd-vid', {src: 'http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4'}).style('opacity: 0.5;');
    tz.add('img', '', 'ma', { src: 'https://ff.xiaoqiaodali.top:5401/i/2026/04/08/69d5f27342740.png' }).style('bottom: 60px;').playmp3();

    tz.bgprog().style('bottom: 40px; color: #fefefe; width: 24=280px;');
    tz.fs().style('left: 20px; top: 20px;');

    const lrcString = `
三月里的小雨‌
雨淅沥沥淅沥沥
雨淅沥沥雨
淅沥沥雨淅沥沥
淅沥沥哗啦啦啦啦
哗啦啦啦啦
哗啦啦啦啦
啊....
三月里的小雨
淅沥沥沥沥沥
淅沥沥沥下个不停
啊山谷里的小溪
哗啦啦啦啦啦
哗啦啦啦流不停
哗啦啦啦啦啦
小雨小雨为谁飘淅沥沥
小溪小溪为谁流哗啦啦
带着满怀的凄清
答滴滴答答滴答
请问小溪谁带我追寻
追寻那一颗爱我的心
三月里的小雨淅沥沥沥沥
淅沥沥沥下个不停
淅沥沥三月里的小雨
小雨淅沥沥沥沥沥沥沥
淅沥沥沥下个不停
三月里的小雨
淅沥沥沥沥沥
淅沥沥沥下个不停
啊....
`;

    let lines = [];
    let currentActiveIndex = -1;

    // 高级柔和彩虹配色（已优化）
    function getRandomColor() {
      const colors = [
            '#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#1dd1a1',
            '#ff9f43', '#5f27cd', '#00d2d3', '#ff3838', '#7efff5'
      ];
      return colors;
    }

    function initCustomLrc(lrcText) {
      const container = document.getElementById('custom-lrc-container');
      container.innerHTML = '';
      lines = [];
      currentActiveIndex = -1;

      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;
                const content = match.trim();
                if (content) lines.push({ time, content });
            }
      });

      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;
                }
                if (activeIndex !== -1 && activeIndex !== currentActiveIndex) {
                  currentActiveIndex = activeIndex;
                  renderSingleLine(container, lines.content);
                }
            });

            audio.addEventListener('ended', () => {
                container.innerHTML = '';
                currentActiveIndex = -1;
            });

            audio.addEventListener('seeked', () => {
               const currentTime = audio.currentTime;
               let activeIndex = -1;
               for (let i = 0; i < lines.length; i++) {
                  if (currentTime >= lines.time) activeIndex = i;
                  else break;
               }
               if (activeIndex !== -1 && activeIndex !== currentActiveIndex) {
                  currentActiveIndex = activeIndex;
                  renderSingleLine(container, lines.content);
               }
            });
      }
    }

    // 逐字彩色渲染
    function renderSingleLine(container, text) {
      container.innerHTML = '';
      const div = document.createElement('div');
      div.className = 'lrc-line';

      let html = '';
      for (let char of text) {
            const color = getRandomColor();
            html += `<span class="char-color" style="color: ${color};">${char}</span>`;
      }

      div.innerHTML = html;
      container.appendChild(div);
    }

    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-8 22:33

这个AI创作的五重唱挺好呢，谢谢枫丹老师精彩分享{:4_204:}

红影 发表于 2026-4-8 23:25

这五重唱真好听，有好听人声和声，还有好听的低音。
欣赏枫丹好帖{:4_187:}

梦油 发表于 2026-4-9 10:47

男生五重唱《三月里的小雨》很富感情色彩，再配上这么美的画面，绝了！枫丹朋友真有两下子。{:5_116:}

魏淑芬 发表于 2026-4-9 13:09

很普通的一首歌，被演绎的这么动听，正好窗外下着小雨，听着美好音乐太享受了，谢谢分享！

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

杨帆 发表于 2026-4-8 22:33
这个AI创作的五重唱挺好呢，谢谢枫丹老师精彩分享

扬帆晚上好！感谢您的支持，恭祝吉祥平安{:4_171:}{:4_187:}

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

红影 发表于 2026-4-8 23:25
这五重唱真好听，有好听人声和声，还有好听的低音。
欣赏枫丹好帖

红影晚上好~~我听喜欢听这五兄弟的歌。温柔中不失阳刚，低音炮别具风味，感谢您的支持，遥祝春褀~{:4_204:}{:4_190:}

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

梦油 发表于 2026-4-9 10:47
男生五重唱《三月里的小雨》很富感情色彩，再配上这么美的画面，绝了！枫丹朋友真有两下子。

梦老晚上好~~有事才上来。感谢您的支持，晚安~~{:4_204:}{:4_190:}

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

魏淑芬 发表于 2026-4-9 13:09
很普通的一首歌，被演绎的这么动听，正好窗外下着小雨，听着美好音乐太享受了，谢谢分享！

魏淑芬晚上好~~今天这场雨以后，野菜会长得很快，我还想出去挖一次{:4_173:}

感谢您的支持，祝您吉祥快乐~~{:4_204:}{:4_190:}

梦油 发表于 2026-4-10 14:17

霜染枫丹 发表于 2026-4-9 22:17
梦老晚上好~~有事才上来。感谢您的支持，晚安~~

你给予我的支持更多啊。

红影 发表于 2026-4-11 16:48

霜染枫丹 发表于 2026-4-9 22:16
红影晚上好~~我听喜欢听这五兄弟的歌。温柔中不失阳刚，低音炮别具风味，感谢您的支持，遥祝春褀~{:4_204 ...

是的，这个组合里的低音特别突出{:4_187:}
页: [1]
查看完整版本: 三月里的小雨 男声五重唱