论坛 › 欢乐水吧 › 《曾醉》 也曾年轻的歌词竖式马老师《什么果》代码学习

霜染枫丹 发表于 2026-6-21 13:13

《曾醉》 也曾年轻的歌词竖式马老师《什么果》代码学习

本帖最后由 霜染枫丹 于 2026-6-24 07:12 编辑 <br /><br /><style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   
    /* 1. 修改容器为竖屏9:16比例（1080x1920是常见竖屏尺寸） */
    .pa {
      --offsetX: 0px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/21/6a36d4571ca23.gif') no-repeat center/cover;
      --ma-size: 12%;
      width: 450px;   
      height: 800px;   
      position: relative;
      overflow: hidden;
    }

    .pa *, .pa *::before, .pa *::after {
      content: none !important;
    }
   
   
   #custom-lrc-container {
      position: absolute;
      top: 50px;      
      right: 20px;
      width: 2em;
      text-align: center;
      z-index: 9999;
      pointer-events: none;
      writing-mode: vertical-rl;      
      height: 80%;   
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .lrc-line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      color: #fefefe;
      font-size: 20px;   
      font-family: "隶书", "LiSu", serif;
      font-weight: normal;
      text-shadow: 0 0 12px 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.15);
      z-index: 10;
    }

   
    @media (max-aspect-ratio: 9/16) {
      .pa {
            width: 100vw;
            height: calc(100vw * 16 / 9);
      }
    }

    @media (min-aspect-ratio: 9/16) {
      .pa {
            width: calc(100vh * 9 / 16);
            height: 100vh;
      }
    }
</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: 'https://imgimg.qqdsw8.cn/view.php/915c88832e0049c6bd78acf0744ba633.mp3' });
    tz.add('video', '', 'pd-vid', {src: 'https://imgimg.qqdsw8.cn/view.php/2ec28ce2bc8f195e7a531771c6e8ff41.mp4'}).style('opacity: 0.5;');

   
    tz.add('img', '', 'ma', {
      src: 'https://pic1.imgdb.cn/item/6a36c2802830ce602a508060.gif'
    })
    .style('right: 15px; bottom: 330px;')
    .playmp3();
   
    // 6. 控制条位置调整：竖屏下控制条通常在底部
    tz.bgprog().style('bottom: 30px; color: #fefefe; width: 80%;');
    tz.fs().style('left: 40px; top: 40px;');

    const lrcString = `
曾醉
作词：五子
作曲：Winky诗
演唱：HITA
山深问桃花染过几度春
哪一枝勾住过客衣上风尘
有倦意三分
要行路千程
怎记这山水静默待离人
轻舟邀斜月听岸上孤筝
回旋处恰趁醉踏青石前门
有余音两声
共与你微醺
融入这一夜长灯落满身
曾画下山间桃花流水逐云
跌破了一晌贪梦了无痕
倚泉浣笔重逢或偶遇洗不净
点墨片心留在归梦时分
斟满浮生在酒中浮与沉
哪一口填满岁月旧日余温
有醉意三分
都酿做前尘
梦醒后又在何处扮离人
红梅邀斜月听墙里孤筝
回旋处不是你惯唱的游吟
似乡音两声
唱今雪纷纷
错看成那年桃花落满身
曾见你山间走马落日长云
踏破了一声珍重无处闻
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平
用醉眼看不清擦肩人
酒醒后分不清假与真
行遍天涯旧约难记存
分岔太多归路不可寻
曾画下山间桃花流水逐云
跌破了一晌贪梦何处寻
倚泉浣笔
重逢或偶遇洗不净
点墨片心留在归梦时分
曾见你山间走马落日长云
踏破了一声珍重了无痕
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平`;

    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-6-21 13:15

本帖最后由 霜染枫丹 于 2026-6-21 14:55 编辑 <br /><br />
https://pic1.imgdb.cn/item/6a36c2802830ce602a508060.gif

霜染枫丹 发表于 2026-6-21 13:17

竖式歌词更能和画面格式融合，看着更和谐{:4_199:}{:4_178:}

霜染枫丹 发表于 2026-6-21 13:18

曾醉
作词：五子
作曲：Winky诗
演唱：HITA
山深问桃花染过几度春
哪一枝勾住过客衣上风尘
有倦意三分
要行路千程
怎记这山水静默待离人
轻舟邀斜月听岸上孤筝
回旋处恰趁醉踏青石前门
有余音两声
共与你微醺
融入这一夜长灯落满身
曾画下山间桃花流水逐云
跌破了一晌贪梦了无痕
倚泉浣笔重逢或偶遇洗不净
点墨片心留在归梦时分
斟满浮生在酒中浮与沉
哪一口填满岁月旧日余温
有醉意三分
都酿做前尘
梦醒后又在何处扮离人
红梅邀斜月听墙里孤筝
回旋处不是你惯唱的游吟
似乡音两声
唱今雪纷纷
错看成那年桃花落满身
曾见你山间走马落日长云
踏破了一声珍重无处闻
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平
用醉眼看不清擦肩人
酒醒后分不清假与真
行遍天涯旧约难记存
分岔太多归路不可寻
曾画下山间桃花流水逐云
跌破了一晌贪梦何处寻
倚泉浣笔
重逢或偶遇洗不净
点墨片心留在归梦时分
曾见你山间走马落日长云
踏破了一声珍重了无痕
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平

红影 发表于 2026-6-21 13:52

的确竖向歌词更契合竖版的帖子，只是小播没必要跟上去呢，即使上去了也再低点才好，否则和某些长歌词有重叠现象呢。{:4_173:}

霜染枫丹 发表于 2026-6-21 14:51

红影 发表于 2026-6-21 13:52
的确竖向歌词更契合竖版的帖子，只是小播没必要跟上去呢，即使上去了也再低点才好，否则和某些长歌词有重叠 ...

我就弄了个小播“自以为“的位置，{:4_173:}下次制作时降下来一些。现在不敢编辑，担心歌词受影响{:4_204:}{:4_190:}

也曾年轻 发表于 2026-6-21 15:31

本帖最后由 也曾年轻 于 2026-6-21 16:59 编辑 <br /><br /><!--
<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   

    .pa {
      --offsetX: 0px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/21/6a36d4571ca23.gif') no-repeat center/cover;
      --ma-size: 12%;
      width: 450px;   
      height: 800px;   
      position: relative;
      overflow: hidden;
    }

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

    #custom-lrc-container {
      position: absolute;
      top: 50px;   /*   定位显示的位置*/
      right: 30px;
      width: 2em;   /*   宽高与横排时反过来*/
      height: 80%;   
      writing-mode: vertical-rl;   /* 设为竖排   */
      z-index: 9999;
      pointer-events: none;
    }


    .lrc-line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      color: #fefefe;
                              color:darkgreen;
      font-size: 20px;   
      font-family: "隶书", "LiSu", serif;
      font-weight: normal;
      text-shadow: 0 0 12px 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.15);
      z-index: 10;
    }

   
    @media (max-aspect-ratio: 9/16) {
      .pa {
            width: 100vw;
            height: calc(100vw * 16 / 9);
      }
    }

    @media (min-aspect-ratio: 9/16) {
      .pa {
            width: calc(100vh * 9 / 16);
            height: 100vh;
      }
    }
</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: 'https://imgimg.qqdsw8.cn/view.php/915c88832e0049c6bd78acf0744ba633.mp3' });
    tz.add('video', '', 'pd-vid', {src: 'https://imgimg.qqdsw8.cn/view.php/2ec28ce2bc8f195e7a531771c6e8ff41.mp4'}).style('opacity: 0.5;');

    //
    tz.add('img', '', 'ma', {
      src: 'https://pic1.imgdb.cn/item/6a36c2802830ce602a508060.gif'
    })
    .style('right: 10px; bottom: 400px;')
    .playmp3();
   
    //
    tz.bgprog().style('bottom: 50%; color: #fefefe; width: 80%; ')
    tz.fs().style('left: 40px; top: 40px;');
    const lrcString = `
曾醉
作词：五子
作曲：Winky诗
演唱：HITA
山深问桃花染过几度春
哪一枝勾住过客衣上风尘
有倦意三分
要行路千程
怎记这山水静默待离人
轻舟邀斜月听岸上孤筝
回旋处恰趁醉踏青石前门
有余音两声
共与你微醺
融入这一夜长灯落满身
曾画下山间桃花流水逐云
跌破了一晌贪梦了无痕
倚泉浣笔重逢或偶遇洗不净
点墨片心留在归梦时分
斟满浮生在酒中浮与沉
哪一口填满岁月旧日余温
有醉意三分
都酿做前尘
梦醒后又在何处扮离人
红梅邀斜月听墙里孤筝
回旋处不是你惯唱的游吟
似乡音两声
唱今雪纷纷
错看成那年桃花落满身
曾见你山间走马落日长云
踏破了一声珍重无处闻
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平
用醉眼看不清擦肩人
酒醒后分不清假与真
行遍天涯旧约难记存
分岔太多归路不可寻
曾画下山间桃花流水逐云
跌破了一晌贪梦何处寻
倚泉浣笔
重逢或偶遇洗不净
点墨片心留在归梦时分
曾见你山间走马落日长云
踏破了一声珍重了无痕
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平`;

    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();
               
               
                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);
    let prog = document.querySelector('.prog');
    prog.style.transform = 'rotate(-90deg)';
    prog.style.cssText += 'left:300px;top:250px;color:brown;';

</script>
-->
<div style="width:521px;height:921px;background:url(https://ff.xiaoqiaodali.top:5401/i/2026/06/21/6a36d4571ca23.gif);overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;position:relative;margin:auto;">
    <progress min='0' max='100' value='35'
    style="width:80%;transform:rotate(-90deg);position:absolute;left:57%;top:25%" ></progress>
    <div style="width:2em;height:80%;position:absolute;top:5%;writing-mode:vertical-rl;color:red;font-size:2em;left:83%">LRC歌词</div>
    <img src="https://pic1.imgdb.cn/item/6a36c2802830ce602a508060.gif" style="width:75px;position:absolute;top:50%;right:5px;" />
</div>

梦江南 发表于 2026-6-21 15:47

画面古风人物漂亮，制作精美，赞一个！{:4_199:}

魏淑芬 发表于 2026-6-21 15:47

欣赏枫丹好制作，音画好般配。{:5_116:}
感觉小播的位置还是在进度条附近比较好，个见。

霜染枫丹 发表于 2026-6-21 16:18

梦江南 发表于 2026-6-21 15:47
画面古风人物漂亮，制作精美，赞一个！

根据也曾年轻的建议和帮助改成竖式歌词，我自己也特别i喜欢。谢谢梦江南，下午好{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-6-21 16:20

魏淑芬 发表于 2026-6-21 15:47
欣赏枫丹好制作，音画好般配。
感觉小播的位置还是在进度条附近比较好，个见。

红影也说别跟上来。晚上我再做一个。竖式歌词让画面特别和谐。谢谢魏淑芬，下午好{:4_204:}{:4_190:}

梦油 发表于 2026-6-21 17:34

祝霜染枫丹朋友家人节日快乐。

霜染枫丹 发表于 2026-6-21 18:32

本帖最后由 霜染枫丹 于 2026-6-24 07:15 编辑 <br /><br /><style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   
    /* 1. 修改容器为竖屏9:16比例（1080x1920是常见竖屏尺寸） */
    .pa {
      --offsetX: 0px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/21/6a36d4571ca23.gif') no-repeat center/cover;
      --ma-size: 12%;
      width: 450px;   
      height: 800px;   
      position: relative;
      overflow: hidden;
    }

    .pa *, .pa *::before, .pa *::after {
      content: none !important;
    }
   
   
   #custom-lrc-container {
      position: absolute;
      top: 50px;      
      right: 20px;
      width: 2em;
      text-align: center;
      z-index: 9999;
      pointer-events: none;
      writing-mode: vertical-rl;      
      height: 80%;   
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .lrc-line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      color: #fefefe;
      font-size: 20px;   
      font-family: "隶书", "LiSu", serif;
      font-weight: normal;
      text-shadow: 0 0 12px 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.15);
      z-index: 10;
    }

   
    @media (max-aspect-ratio: 9/16) {
      .pa {
            width: 100vw;
            height: calc(100vw * 16 / 9);
      }
    }

    @media (min-aspect-ratio: 9/16) {
      .pa {
            width: calc(100vh * 9 / 16);
            height: 100vh;
      }
    }
</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: 'https://imgimg.qqdsw8.cn/view.php/915c88832e0049c6bd78acf0744ba633.mp3' });
    tz.add('video', '', 'pd-vid', {src: 'https://imgimg.qqdsw8.cn/view.php/2ec28ce2bc8f195e7a531771c6e8ff41.mp4'}).style('opacity: 0.5;');

   
    tz.add('img', '', 'ma', {
      src: 'https://pic1.imgdb.cn/item/6a36c2802830ce602a508060.gif'
    })
    .style('right: 15px; bottom: 330px;')
    .playmp3();
   
    // 6. 控制条位置调整：竖屏下控制条通常在底部
    tz.bgprog().style('bottom: 30px; color: #fefefe; width: 80%;');
    tz.fs().style('left: 40px; top: 40px;');

    const lrcString = `
曾醉
作词：五子
作曲：Winky诗
演唱：HITA
山深问桃花染过几度春
哪一枝勾住过客衣上风尘
有倦意三分
要行路千程
怎记这山水静默待离人
轻舟邀斜月听岸上孤筝
回旋处恰趁醉踏青石前门
有余音两声
共与你微醺
融入这一夜长灯落满身
曾画下山间桃花流水逐云
跌破了一晌贪梦了无痕
倚泉浣笔重逢或偶遇洗不净
点墨片心留在归梦时分
斟满浮生在酒中浮与沉
哪一口填满岁月旧日余温
有醉意三分
都酿做前尘
梦醒后又在何处扮离人
红梅邀斜月听墙里孤筝
回旋处不是你惯唱的游吟
似乡音两声
唱今雪纷纷
错看成那年桃花落满身
曾见你山间走马落日长云
踏破了一声珍重无处闻
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平
用醉眼看不清擦肩人
酒醒后分不清假与真
行遍天涯旧约难记存
分岔太多归路不可寻
曾画下山间桃花流水逐云
跌破了一晌贪梦何处寻
倚泉浣笔
重逢或偶遇洗不净
点墨片心留在归梦时分
曾见你山间走马落日长云
踏破了一声珍重了无痕
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平`;

    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-6-21 19:54

霜染枫丹 发表于 2026-6-21 18:32
谢谢梦老~~最近这些日子在忙事情，还需要一些时日，故而很少登录。祝梦老父亲节快乐！！{:4_190 ...

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

红影 发表于 2026-6-21 20:43

霜染枫丹 发表于 2026-6-21 14:51
我就弄了个小播“自以为“的位置，下次制作时降下来一些。现在不敢编辑，担心歌词受影响{:4_204 ...

嗯嗯，问题不大的{:4_173:}

查看完整版本: 《曾醉》 也曾年轻的歌词竖式马老师《什么果》代码学习