论坛 › AI创作交流 › 曾醉 学习马老师《什么花》制作小播 竖式

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

曾醉 学习马老师《什么花》制作小播 竖式

<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;
      bottom: 50px;      
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 9999;
      pointer-events: none;
      
      height: 20px;   
      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: 170px; bottom: 70px;')
    .playmp3();
   
    //
    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();
               
               
                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 02:10

马老师帖子名称《什么果》，打错字了，抱歉！

梦江南 发表于 2026-6-21 06:57

真漂亮，谢谢版主分享，早上好！{:4_204:}

也曾年轻 发表于 2026-6-21 07:24

https://5b0988e595225.cdn.sohucs.com/images/20200409/db39fb96f8534ea6a6583d3e35f6721e.gif

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

梦江南 发表于 2026-6-21 06:57
真漂亮，谢谢版主分享，早上好！

感谢梦江南的支持，中午好！{:4_204:}{:4_190:}

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

也曾年轻 发表于 2026-6-21 07:24


感谢也曾年轻的鼓励，试着做个竖版的播放器，第一次做竖版，还有改进空间。父亲节快乐！{:4_204:}{:4_190:}

也曾年轻 发表于 2026-6-21 11:59

霜染枫丹 发表于 2026-6-21 11:46
感谢也曾年轻的鼓励，试着做个竖版的播放器，第一次做竖版，还有改进空间。父亲节快乐！{:4_190 ...

哦， 这个意图啊。竖版把歌词也立起来{:5_106:}

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

也曾年轻 发表于 2026-6-21 11:59
哦， 这个意图啊。竖版把歌词也立起来

一个同学说想要一个他自己照片（我回老家时给拍的）能在手机上播放的视频。我就试着做了这个，还需要给整理成mp4发给他。他生日孩子请客要嘚瑟{:4_173:}还是喜欢横版的{:4_190:}

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

也曾年轻 发表于 2026-6-21 11:59
哦， 这个意图啊。竖版把歌词也立起来

昨晚给我信息很晚了，我的水平又不达标。用绘声绘影我很快能出来这种效果，可这位老人家一定要代码。他也在学。歌词立起来我还不会，{:4_173:}

红影 发表于 2026-6-21 12:30

真漂亮的制作，古色古香的。
欣赏枫丹好帖{:4_187:}

也曾年轻 发表于 2026-6-21 12:39

霜染枫丹 发表于 2026-6-21 12:06
一个同学说想要一个他自己照片（我回老家时给拍的）能在手机上播放的视频。我就试着做了这个，还需要给整 ...

只是说可以换个花样看看， 不一定要这么做。

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

红影 发表于 2026-6-21 12:30
真漂亮的制作，古色古香的。
欣赏枫丹好帖

谢红影的支持，这首歌我挺喜欢听得，挺轻柔的，就选择了古装人物。{:4_204:}{:4_190:}

也曾年轻 发表于 2026-6-21 12:50

霜染枫丹 发表于 2026-6-21 12:09
昨晚给我信息很晚了，我的水平又不达标。用绘声绘影我很快能出来这种效果，可这位老人家一定要代码。他也 ...

其实立起来也简单
    #custom-lrc-container {
      position: absolute;
      top: 50px;      
      right: 30px;
      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;
    }

就这里改了几个参数

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

也曾年轻 发表于 2026-6-21 12:39
只是说可以换个花样看看， 不一定要这么做。

先给自己欠个帐，我这写日子友协忙，等忙完了我在做个竖版歌词的。我用时间换空间。慢慢做能成的{:4_190:}

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

也曾年轻 发表于 2026-6-21 12:50
其实立起来也简单

就这里改了几个参数

哈哈~~谢谢也曾年轻，我下午就试着做出来。{:4_199:}{:4_172:}{:4_204:}{:4_199:}

也曾年轻 发表于 2026-6-21 13:04

霜染枫丹 发表于 2026-6-21 12:52
哈哈~~谢谢也曾年轻，我下午就试着做出来。

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

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

也曾年轻 发表于 2026-6-21 13:04
把居中的设置都省掉

好的！歌词我已经“立“起来了，很漂亮！！{:4_199:}

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

霜染枫丹 发表于 2026-6-21 12:48
谢红影的支持，这首歌我挺喜欢听得，挺轻柔的，就选择了古装人物。

嗯嗯，用古装人物还挺适合的{:4_204:}

杨帆 发表于 2026-6-22 20:06

这个竖版的挺漂亮~谢谢精彩分享{:4_204:}

查看完整版本: 曾醉 学习马老师《什么花》制作小播 竖式