论坛 › AI创作交流 › 清平调 李白 韩雪演唱

霜染枫丹 发表于 2026-3-31 00:17

清平调 李白 韩雪演唱

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   
    .pa {
      --offsetX: 0px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/03/30/69ca90ad3368c.gif') no-repeat center/cover;
      --ma-size: 12%;
      width: 1500px;
      height: 844px;
      position: relative;
      overflow: hidden;
    }

    .pa *, .pa *::before, .pa *::after {
      content: none !important;
    }
   
    /* 【关键修改】歌词容器样式 */
    #custom-lrc-container {
      position: absolute;
      top: 780px;      
      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/f83fc4874be4ad557bd79173de922b86.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;
                const content = match.trim();
               
                if (content) {
                  lines.push({ time, content, element: null });
                }
            }
      });

      // 生成 DOM：所有歌词都创建出来，但默认透明
      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) {
                        // 当前句：显示
                        if (!line.element.classList.contains('active')) {
                            line.element.classList.add('active');
                        }
                  } else {
                        // 其他句：隐藏
                        if (line.element.classList.contains('active')) {
                            line.element.classList.remove('active');
                        }
                  }
                });
            });
            
            // 监听播放结束，清空状态
            audio.addEventListener('ended', () => {
               lines.forEach(line => line.element.classList.remove('active'));
            });
      }
    }

    // 延迟初始化，确保 audio 标签已存在
    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-3-31 00:20

歌词中的数字我不太清楚是怎么出来的。继续学习吧，这次只能这样了。

也曾年轻 发表于 2026-3-31 07:53

https://5b0988e595225.cdn.sohucs.com/images/20200114/d632f0b1d631445ea51e30e59bf6e6c5.gif

也曾年轻 发表于 2026-3-31 07:57

霜染枫丹 发表于 2026-3-31 00:20
歌词中的数字我不太清楚是怎么出来的。继续学习吧，这次只能这样了。

歌词里的这些字符（‌)不能去掉吗

也曾年轻 发表于 2026-3-31 08:16

霜染枫丹 发表于 2026-3-31 00:20
歌词中的数字我不太清楚是怎么出来的。继续学习吧，这次只能这样了。

在网上搜了一下，‌ 是零宽度字符的一种，在屏幕上不会显示，相当于display:none;

因为形式不对的原因把它给显示出来了， 用在 js 代码里它应被写作 \U200C 。

HTML里 &#8204；
JS 里 \U200C

霜染枫丹 发表于 2026-3-31 09:00

也曾年轻 发表于 2026-3-31 07:53


也曾年轻上午好~~

首先感谢您的支持敏感谢您的帮助，很感动！
我首先发在我自己的家园网，一切正常，就把代码复制过来，然后就是清除不掉了。我按找您说的试试。{:4_204:}{:4_190:}

雨季工作室 发表于 2026-3-31 09:27

本帖最后由 雨季工作室 于 2026-3-31 09:28 编辑

画面雅致，歌曲寄情，欣赏了，问好老师，春祺！http://yinhuabbs.cn/static/image/smiley/pw_default/55.gif

霜染枫丹 发表于 2026-3-31 09:37

也曾年轻 发表于 2026-3-31 08:16
在网上搜了一下，‌ 是零宽度字符的一种，在屏幕上不会显示，相当于display:none;

因为形式不对 ...
我按找您说的进行了修改，也把歌词显示改了一下，添加了content = content.replace(/&#\d+;/g, '').trim();   在中画网试了，没有拖油瓶出来了，全屏显示也和进度条的比例保持一致。这里点击编辑后在发布就没歌词了。
特别感谢也曾年轻的关照！
http://yinhuabbs.cn/forum.php?mod=viewthread&tid=262760&extra=page%3D1&page=58

霜染枫丹 发表于 2026-3-31 09:41

雨季工作室 发表于 2026-3-31 09:27
画面雅致，歌曲寄情，欣赏了，问好老师，春祺！

雨季工作室上午好~~

我一直很喜欢这首清平调韩雪 吉克隽逸演唱的版本。感谢您的支持，恭祝吉祥安好！{:4_204:}{:4_190:}

也曾年轻 发表于 2026-3-31 10:43

霜染枫丹 发表于 2026-3-31 09:37
我按找您说的进行了修改，也把歌词显示改了一下，添加了content = content.replace(/&#\d+;/g, '').tri ...

没懂，在这改了出错？

霜染枫丹 发表于 2026-3-31 11:06

也曾年轻 发表于 2026-3-31 10:43
没懂，在这改了出错？

花潮论坛播放器贴点击编辑以后，就丢失了“纯文本“的勾选框，编辑好了以后点击发布，就不能显示歌词了。我是在发布《尺素迟》的帖子时发现的，当时给了我很大困扰。昨晚也是如此，我那个《绽放》的帖子是后改的，本不想发布，初始是发布《清平调》的，发现有拖油瓶以后我忘记了这件事情，点击了编辑，结果就回不来了，于是找了旧帖发上来了。

也曾年轻 发表于 2026-3-31 11:13

霜染枫丹 发表于 2026-3-31 11:06
花潮论坛播放器贴点击编辑以后，就丢失了“纯文本“的勾选框，编辑好了以后点击发布，就不能显示歌词了。 ...

我从网页上获得帖子代码然后修改试了下是可以的。
    const lrcString = `
云想衣裳花想容‌
‌春风拂槛露华浓‌
‌若非群玉山头见
‌会向瑶台月下逢
‌一枝秾艳露凝香‌
‌云雨巫山枉断肠‌
‌借问汉宫谁得似
‌可怜飞燕倚新妆
‌名花倾国两相欢‌
‌长得君王带笑看
‌解释春风无限恨
‌沉香亭北倚阑干‌
解释春风无限恨
‌沉香亭北倚阑干‌
云想衣裳花想容‌
‌春风拂槛露华浓‌
‌若非群玉山头见
‌会向瑶台月下逢
‌一枝秾艳露凝香‌
‌云雨巫山枉断肠‌
‌借问汉宫谁得似
‌可怜飞燕倚新妆
‌名花倾国两相欢‌
‌长得君王带笑看
‌解释春风无限恨
‌沉香亭北倚阑干‌
解释春风无限恨
‌沉香亭北倚阑干‌
解释春风无限恨
‌沉香亭北倚阑干`.replace(/&#\d{4};/g, "\u200c");

替换成空也是可以的。

霜染枫丹 发表于 2026-3-31 12:24

也曾年轻 发表于 2026-3-31 11:13
我从网页上获得帖子代码然后修改试了下是可以的。

替换成空也是可以的。

新楼层都可以，我试试{:4_204:}

霜染枫丹 发表于 2026-3-31 12:26

霜染枫丹 发表于 2026-3-31 12:33

也曾年轻 发表于 2026-3-31 11:13
我从网页上获得帖子代码然后修改试了下是可以的。

替换成空也是可以的。

只要一打开编辑，就在回不去了，纯文本框就没有了。我是极速浏览器和谷歌浏览器，都一样不能全部完成编辑，视频贴是链接b站播放，没影响，播放器有影响。

也曾年轻 发表于 2026-3-31 12:45

霜染枫丹 发表于 2026-3-31 12:33
只要一打开编辑，就在回不去了，纯文本框就没有了。我是极速浏览器和谷歌浏览器，都一样不能全部完成编辑 ...

纯文本框没有不会有任何影响，就在论坛里改就行且改的又不多。

霜染枫丹 发表于 2026-3-31 12:51

也曾年轻 发表于 2026-3-31 12:45
纯文本框没有不会有任何影响，就在论坛里改就行且改的又不多。

就是歌词不显示了，其他没影响{:4_190:}

霜染枫丹 发表于 2026-3-31 12:54

也曾年轻 发表于 2026-3-31 12:45
纯文本框没有不会有任何影响，就在论坛里改就行且改的又不多。
刚才我又试了就是不显示歌词了，歌声动画都正常播放。我弄不明白为什么，知道就是这样的状况，好像和代码没关系，代码中歌词都在。{:4_190:}

霜染枫丹 发表于 2026-3-31 12:57

https://s3.bmp.ovh/2026/03/31/K85bvhlG.jpg

霜染枫丹 发表于 2026-3-31 12:58

https://s3.bmp.ovh/2026/03/31/wg4PkSEv.gif

查看完整版本: 清平调 李白 韩雪演唱